@ailog/cli 0.1.1 → 0.1.3

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

@@ -1,224 +0,0 @@
-'use client'
-
-import { useEffect, useState, useCallback } from 'react'
-import { useParams } from 'next/navigation'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { Skeleton } from '@/components/ui/skeleton'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { ApiKeysTable } from '@/components/api-keys-table'
-import { CreateApiKeyDialog } from '@/components/create-api-key-dialog'
-import { rpcClient } from '@/lib/rpc-client'
-import { toast } from 'sonner'
-import type { App, ApiKey } from '@/lib/api'
-
-function formatDate(dateString: string) {
-  return new Date(dateString).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  })
-}
-
-export default function SettingsPage() {
-  const params = useParams()
-  const appId = params.appId as string
-
-  const [app, setApp] = useState<App | null>(null)
-  const [isLoading, setIsLoading] = useState(true)
-  const [isSaving, setIsSaving] = useState(false)
-  const [name, setName] = useState('')
-
-  // API Keys state
-  const [keys, setKeys] = useState<ApiKey[]>([])
-  const [isLoadingKeys, setIsLoadingKeys] = useState(true)
-
-  const fetchKeys = useCallback(async () => {
-    try {
-      const res = await rpcClient.api.admin.apps[':appId']['api-keys'].$get({
-        param: { appId },
-      })
-      if (res.ok) {
-        const data = await res.json()
-        setKeys(data.keys)
-      }
-    } catch (error) {
-      console.error('Failed to fetch API keys:', error)
-    } finally {
-      setIsLoadingKeys(false)
-    }
-  }, [appId])
-
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const appRes = await rpcClient.api.admin.apps[':appId'].$get({
-          param: { appId },
-        })
-
-        if (appRes.ok) {
-          const appData = await appRes.json()
-          setApp(appData as App)
-          setName(appData.name)
-        }
-      } catch (error) {
-        console.error('Failed to fetch data:', error)
-      } finally {
-        setIsLoading(false)
-      }
-    }
-    fetchData()
-    fetchKeys()
-  }, [appId, fetchKeys])
-
-  const handleSave = async () => {
-    if (!name.trim()) {
-      toast.error('Name is required')
-      return
-    }
-
-    setIsSaving(true)
-    try {
-      const res = await rpcClient.api.admin.apps[':appId'].$put({
-        param: { appId },
-        json: { name: name.trim() },
-      })
-
-      if (res.ok) {
-        const updatedApp = await res.json()
-        setApp(updatedApp as App)
-        toast.success('App name updated successfully')
-      } else {
-        toast.error('Failed to update app name')
-      }
-    } catch (error) {
-      console.error('Failed to update app:', error)
-      toast.error('Failed to update app name')
-    } finally {
-      setIsSaving(false)
-    }
-  }
-
-  const hasChanges = app && name !== app.name
-
-  if (isLoading) {
-    return (
-      <div className="space-y-6">
-        <Card>
-          <CardHeader>
-            <Skeleton className="h-5 w-24" />
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-3/4" />
-          </CardContent>
-        </Card>
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-6">
-      <Card>
-        <CardHeader>
-          <CardTitle>General</CardTitle>
-          <CardDescription>
-            Application settings and information
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="name">App Name</Label>
-            <div className="flex gap-2">
-              <Input
-                id="name"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder="Enter app name"
-                className="max-w-md"
-              />
-              <Button onClick={handleSave} disabled={!hasChanges || isSaving}>
-                {isSaving ? 'Saving...' : 'Save'}
-              </Button>
-            </div>
-          </div>
-          <div>
-            <p className="text-muted-foreground text-sm font-medium">App ID</p>
-            <p className="font-mono text-sm">{app?.appId}</p>
-          </div>
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <p className="text-muted-foreground text-sm font-medium">
-                Created
-              </p>
-              <p className="text-sm">
-                {app?.createdAt ? formatDate(app.createdAt) : '-'}
-              </p>
-            </div>
-            <div>
-              <p className="text-muted-foreground text-sm font-medium">
-                Last Updated
-              </p>
-              <p className="text-sm">
-                {app?.updatedAt ? formatDate(app.updatedAt) : '-'}
-              </p>
-            </div>
-          </div>
-          {app?.metadata && Object.keys(app.metadata).length > 0 && (
-            <div>
-              <p className="text-muted-foreground mb-2 text-sm font-medium">
-                Metadata
-              </p>
-              <pre className="bg-muted overflow-auto rounded-md p-2 text-xs">
-                {JSON.stringify(app.metadata, null, 2)}
-              </pre>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <div>
-              <CardTitle>API Keys</CardTitle>
-              <CardDescription>
-                Manage API keys for this application
-              </CardDescription>
-            </div>
-            <CreateApiKeyDialog
-              appId={appId}
-              onKeyCreated={fetchKeys}
-              isFirstKey={keys.length === 0 && !isLoadingKeys}
-            />
-          </div>
-        </CardHeader>
-        <CardContent>
-          {keys.length === 0 && !isLoadingKeys ? (
-            <div className="py-6 text-center">
-              <p className="text-muted-foreground text-sm">
-                No API keys yet. Create one to start using the API.
-              </p>
-            </div>
-          ) : (
-            <ApiKeysTable
-              keys={keys}
-              isLoading={isLoadingKeys}
-              appId={appId}
-              onRevoke={fetchKeys}
-            />
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  )
-}

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

@@ -1,283 +0,0 @@
-'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>
-  )
-}