@ailog/cli 0.1.0

package/dist/standalone/app/apps/[appId]/threads/[threadId]/page.tsx

@@ -0,0 +1,283 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useParams } from 'next/navigation'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { ChatView } from '@/components/chat-view'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { RequestDetailPanel } from '@/components/request-detail-panel'
+import { GenerationDetailPanel } from '@/components/generation-detail-panel'
+import { GenerationTimeline } from '@/components/generation-timeline'
+import { useKeydown } from '@/hooks/use-keydown'
+import { rpcClient } from '@/lib/rpc-client'
+import type { Thread, Generation } from '@/lib/api'
+
+export default function ThreadDetailPage() {
+  const params = useParams()
+  const appId = params.appId as string
+  const threadId = params.threadId as string
+
+  const [thread, setThread] = useState<Thread | null>(null)
+  const [generations, setGenerations] = useState<Generation[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [selectedRequestId, setSelectedRequestId] = useState<string | null>(
+    null,
+  )
+  const [selectedGenerationId, setSelectedGenerationId] = useState<
+    string | null
+  >(null)
+  const [viewMode, setViewMode] = useState<'details' | 'timeline'>('details')
+
+  // Keyboard navigation for generations
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (generations.length === 0) return
+
+      const currentIndex = generations.findIndex(
+        (g) => g.generationId === selectedGenerationId,
+      )
+
+      if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        if (currentIndex === -1) {
+          setSelectedGenerationId(generations[0].generationId)
+          setSelectedRequestId(null)
+        } else if (currentIndex < generations.length - 1) {
+          setSelectedGenerationId(generations[currentIndex + 1].generationId)
+          setSelectedRequestId(null)
+        }
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        if (currentIndex > 0) {
+          setSelectedGenerationId(generations[currentIndex - 1].generationId)
+          setSelectedRequestId(null)
+        } else if (currentIndex === -1 && generations.length > 0) {
+          setSelectedGenerationId(
+            generations[generations.length - 1].generationId,
+          )
+          setSelectedRequestId(null)
+        }
+      }
+    },
+    [generations, selectedGenerationId],
+  )
+
+  useKeydown(handleKeyDown)
+
+  const leftContainerRef = useRef<HTMLDivElement>(null)
+
+  // Scroll to selected generation (within ScrollArea only, not main page)
+  useEffect(() => {
+    if (!selectedGenerationId || !leftContainerRef.current) return
+
+    const viewport = leftContainerRef.current.querySelector(
+      '[data-slot="scroll-area-viewport"]',
+    )
+    const element = leftContainerRef.current.querySelector(
+      `[data-generation-id="${selectedGenerationId}"]`,
+    )
+
+    if (viewport && element) {
+      const viewportRect = viewport.getBoundingClientRect()
+      const elementRect = element.getBoundingClientRect()
+      const scrollTop = viewport.scrollTop
+
+      const elementTop = elementRect.top - viewportRect.top + scrollTop
+      const elementBottom = elementTop + elementRect.height
+      const viewportHeight = viewportRect.height
+
+      if (elementTop < scrollTop) {
+        viewport.scrollTo({ top: elementTop, behavior: 'smooth' })
+      } else if (elementBottom > scrollTop + viewportHeight) {
+        viewport.scrollTo({
+          top: elementBottom - viewportHeight,
+          behavior: 'smooth',
+        })
+      }
+    }
+  }, [selectedGenerationId])
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        // Fetch thread and all generations for this thread
+        const [threadRes, generationsRes] = await Promise.all([
+          rpcClient.api.admin.apps[':appId'].threads[':threadId'].$get({
+            param: { appId, threadId },
+          }),
+          rpcClient.api.admin.apps[':appId'].generations.$get({
+            param: { appId },
+            query: { threadId },
+          }),
+        ])
+
+        if (threadRes.ok) {
+          const threadData = await threadRes.json()
+          setThread(threadData as Thread)
+        }
+
+        if (generationsRes.ok) {
+          const generationsData = await generationsRes.json()
+          setGenerations(generationsData.generations as Generation[])
+        }
+      } catch (error) {
+        console.error('Failed to fetch data:', error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    fetchData()
+  }, [appId, threadId])
+
+  // Derive requests from generations by grouping unique requestIds
+  const requests = useMemo(() => {
+    const requestMap = new Map<
+      string,
+      { requestId: string; createdAt: string }
+    >()
+    for (const gen of generations) {
+      if (!requestMap.has(gen.requestId)) {
+        requestMap.set(gen.requestId, {
+          requestId: gen.requestId,
+          createdAt: gen.createdAt,
+        })
+      } else {
+        // Use the earliest createdAt for the request
+        const existing = requestMap.get(gen.requestId)!
+        if (gen.createdAt < existing.createdAt) {
+          existing.createdAt = gen.createdAt
+        }
+      }
+    }
+    return Array.from(requestMap.values())
+  }, [generations])
+
+  return (
+    <div className="space-y-4">
+      {/* Thread Info / Timeline */}
+      <Card className="py-2">
+        <CardHeader className="px-3 py-2">
+          <div className="flex items-center justify-between">
+            <div className="flex gap-1">
+              <Button
+                variant={viewMode === 'details' ? 'secondary' : 'ghost'}
+                size="sm"
+                className="h-6 px-2 text-xs"
+                onClick={() => setViewMode('details')}
+              >
+                Details
+              </Button>
+              <Button
+                variant={viewMode === 'timeline' ? 'secondary' : 'ghost'}
+                size="sm"
+                className="h-6 px-2 text-xs"
+                onClick={() => setViewMode('timeline')}
+                disabled={generations.length === 0}
+              >
+                Timeline
+              </Button>
+            </div>
+            {isLoading ? (
+              <Skeleton className="h-4 w-24" />
+            ) : (
+              <span className="text-muted-foreground text-xs">
+                {thread?.title || '(Untitled)'}
+              </span>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent className="px-3 pt-0 pb-2">
+          {viewMode === 'details' ? (
+            isLoading ? (
+              <div className="flex gap-6">
+                <Skeleton className="h-3 w-24" />
+                <Skeleton className="h-3 w-24" />
+              </div>
+            ) : (
+              <div className="flex flex-wrap gap-x-6 gap-y-1 text-xs">
+                <div>
+                  <span className="text-muted-foreground">Thread ID: </span>
+                  <span className="font-mono">{thread?.threadId}</span>
+                </div>
+                {thread?.tenantId && (
+                  <div>
+                    <span className="text-muted-foreground">Tenant ID: </span>
+                    <span>{thread.tenantId}</span>
+                  </div>
+                )}
+                <div>
+                  <span className="text-muted-foreground">User: </span>
+                  <span className="font-mono">{thread?.userId}</span>
+                </div>
+              </div>
+            )
+          ) : (
+            <GenerationTimeline
+              generations={generations}
+              selectedGenerationId={selectedGenerationId}
+              onSelectGeneration={(generationId) => {
+                setSelectedGenerationId(generationId)
+                setSelectedRequestId(null)
+              }}
+            />
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Split View: Chat + Details */}
+      <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_minmax(0,2fr)] gap-3">
+        <ScrollArea
+          className="h-[calc(100vh-220px)] [&_[data-slot=scroll-area-viewport]>div]:!block"
+          ref={leftContainerRef}
+        >
+          {/* Left: Chat View */}
+          <ChatView
+            requests={requests}
+            generations={generations}
+            isLoading={isLoading}
+            selectedRequestId={selectedRequestId}
+            selectedGenerationId={selectedGenerationId}
+            onSelectRequest={(requestId) => {
+              setSelectedRequestId(requestId)
+              setSelectedGenerationId(null)
+            }}
+            onSelectGeneration={(generationId) => {
+              setSelectedGenerationId(generationId)
+              setSelectedRequestId(null)
+            }}
+          />
+        </ScrollArea>
+
+        <ScrollArea className="h-[calc(100vh-220px)] border [&_[data-slot=scroll-area-viewport]>div]:!block">
+          {/* Right: Details Panel */}
+          <div className="w-full min-w-0 overflow-hidden p-4">
+            {selectedGenerationId ? (
+              <GenerationDetailPanel
+                generation={
+                  generations.find(
+                    (g) => g.generationId === selectedGenerationId,
+                  ) || null
+                }
+              />
+            ) : (
+              <RequestDetailPanel
+                request={
+                  requests.find((r) => r.requestId === selectedRequestId) ||
+                  null
+                }
+                generations={generations}
+                selectedGenerationId={selectedGenerationId}
+                onSelectGeneration={(generationId) => {
+                  setSelectedGenerationId(generationId)
+                  setSelectedRequestId(null)
+                }}
+              />
+            )}
+          </div>
+        </ScrollArea>
+      </div>
+    </div>
+  )
+}

package/dist/standalone/components/apps-table.tsx

@@ -0,0 +1,274 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { HugeiconsIcon } from '@hugeicons/react'
+import {
+  MoreHorizontalCircle01Icon,
+  EyeIcon,
+  Delete02Icon,
+  Copy01Icon,
+} from '@hugeicons/core-free-icons'
+import { rpcClient } from '@/lib/rpc-client'
+import { toast } from 'sonner'
+import type { App } from '@/lib/api'
+
+interface AppsTableProps {
+  apps: App[]
+  isLoading: boolean
+  onDelete: () => void
+}
+
+function formatDate(dateString: string) {
+  return new Date(dateString).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+function copyToClipboard(text: string) {
+  navigator.clipboard.writeText(text)
+  toast.success('Copied to clipboard')
+}
+
+function truncateId(id: string, maxLength = 12) {
+  return id.length > maxLength ? `${id.substring(0, maxLength)}...` : id
+}
+
+export function AppsTable({ apps, isLoading, onDelete }: AppsTableProps) {
+  const router = useRouter()
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+  const [appToDelete, setAppToDelete] = useState<App | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  const handleDelete = async () => {
+    if (!appToDelete) return
+
+    setIsDeleting(true)
+    try {
+      const res = await rpcClient.api.admin.apps[':appId'].$delete({
+        param: { appId: appToDelete.appId },
+      })
+
+      if (!res.ok) {
+        throw new Error('Failed to delete app')
+      }
+
+      toast.success('App deleted successfully')
+      setDeleteDialogOpen(false)
+      setAppToDelete(null)
+      onDelete()
+    } catch (error) {
+      toast.error('Failed to delete app')
+      console.error(error)
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>App ID</TableHead>
+              <TableHead>Name</TableHead>
+              <TableHead>Created</TableHead>
+              <TableHead>Updated</TableHead>
+              <TableHead className="w-[70px]"></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {[...Array(3)].map((_, i) => (
+              <TableRow key={i}>
+                <TableCell>
+                  <Skeleton className="h-5 w-48" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-5 w-32" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-5 w-36" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-5 w-36" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-8 w-8" />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    )
+  }
+
+  if (apps.length === 0) {
+    return (
+      <div className="rounded-md border p-8 text-center">
+        <p className="text-muted-foreground">
+          No apps yet. Create your first app to get started.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>App ID</TableHead>
+              <TableHead>Name</TableHead>
+              <TableHead>Created</TableHead>
+              <TableHead>Updated</TableHead>
+              <TableHead className="w-[70px]"></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {apps.map((app) => (
+              <TableRow
+                key={app.appId}
+                className="cursor-pointer"
+                onClick={() => router.push(`/apps/${app.appId}`)}
+              >
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    {app.appId.length > 12 ? (
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <code className="text-muted-foreground cursor-default font-mono text-sm">
+                            {truncateId(app.appId)}
+                          </code>
+                        </TooltipTrigger>
+                        <TooltipContent>{app.appId}</TooltipContent>
+                      </Tooltip>
+                    ) : (
+                      <code className="text-muted-foreground font-mono text-sm">
+                        {app.appId}
+                      </code>
+                    )}
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        copyToClipboard(app.appId)
+                      }}
+                    >
+                      <HugeiconsIcon icon={Copy01Icon} className="h-3 w-3" />
+                    </Button>
+                  </div>
+                </TableCell>
+                <TableCell className="font-medium">{app.name}</TableCell>
+                <TableCell className="text-muted-foreground">
+                  {formatDate(app.createdAt)}
+                </TableCell>
+                <TableCell className="text-muted-foreground">
+                  {formatDate(app.updatedAt)}
+                </TableCell>
+                <TableCell className="p-0" onClick={(e) => e.stopPropagation()}>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <button className="hover:bg-muted/50 flex h-full w-full items-center justify-center p-4">
+                        <HugeiconsIcon
+                          icon={MoreHorizontalCircle01Icon}
+                          className="h-4 w-4"
+                        />
+                      </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem asChild>
+                        <Link href={`/apps/${app.appId}`}>
+                          <HugeiconsIcon
+                            icon={EyeIcon}
+                            className="mr-2 h-4 w-4"
+                          />
+                          View
+                        </Link>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        className="text-destructive focus:text-destructive"
+                        onClick={() => {
+                          setAppToDelete(app)
+                          setDeleteDialogOpen(true)
+                        }}
+                      >
+                        <HugeiconsIcon
+                          icon={Delete02Icon}
+                          className="mr-2 h-4 w-4"
+                        />
+                        Delete
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete App</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete &quot;{appToDelete?.name}&quot;?
+              This action cannot be undone and will delete all associated data.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              disabled={isDeleting}
+            >
+              {isDeleting ? 'Deleting...' : 'Delete'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}

package/dist/standalone/components.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-lyra",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "hugeicons",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package/dist/standalone/dist/standalone/app/apps/[appId]/layout.tsx

@@ -0,0 +1,3 @@
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}