@ailog/cli 0.1.0

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

@@ -0,0 +1,238 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+import { useQueryState, parseAsString } from 'nuqs'
+import { ThreadsTable } from '@/components/threads-table'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { rpcClient } from '@/lib/rpc-client'
+import { useConfig } from '@/providers/config-provider'
+import { HugeiconsIcon } from '@hugeicons/react'
+import { FilterIcon, Cancel01Icon } from '@hugeicons/core-free-icons'
+import type { Thread, ApiKey } from '@/lib/api'
+
+export default function ThreadsPage() {
+  const params = useParams()
+  const appId = params.appId as string
+  const { config, isLoading: isLoadingConfig } = useConfig()
+
+  // URL params managed by nuqs
+  const [tenantId, setTenantId] = useQueryState(
+    'tenantId',
+    parseAsString.withDefault(''),
+  )
+  const [userId, setUserId] = useQueryState(
+    'userId',
+    parseAsString.withDefault(''),
+  )
+
+  const [threads, setThreads] = useState<Thread[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [isLoadingMore, setIsLoadingMore] = useState(false)
+  const [showFilters, setShowFilters] = useState(false)
+
+  // Cursor pagination state
+  const [nextCursor, setNextCursor] = useState<string | null>(null)
+  const [hasMore, setHasMore] = useState(false)
+
+  // API Keys state
+  const [apiKeys, setApiKeys] = useState<ApiKey[]>([])
+  const [isLoadingKeys, setIsLoadingKeys] = useState(true)
+
+  // Pending filter state (for input fields before applying)
+  const [pendingTenantId, setPendingTenantId] = useState(tenantId)
+  const [pendingUserId, setPendingUserId] = useState(userId)
+
+  // Sync pending state when URL params change
+  useEffect(() => {
+    setPendingTenantId(tenantId)
+    setPendingUserId(userId)
+  }, [tenantId, userId])
+
+  const fetchThreads = useCallback(
+    async (cursor?: string) => {
+      if (cursor) {
+        setIsLoadingMore(true)
+      } else {
+        setIsLoading(true)
+      }
+
+      try {
+        const query: Record<string, string> = { limit: '50' }
+        if (tenantId) query.tenantId = tenantId
+        if (userId) query.userId = userId
+        if (cursor) query.cursor = cursor
+
+        const res = await rpcClient.api.admin.apps[':appId'].threads.$get({
+          param: { appId },
+          query,
+        })
+
+        if (res.ok) {
+          const data = await res.json()
+          if (cursor) {
+            setThreads((prev) => [...prev, ...data.threads])
+          } else {
+            setThreads(data.threads)
+          }
+          setNextCursor(data.nextCursor)
+          setHasMore(data.hasMore)
+        }
+      } catch (error) {
+        console.error('Failed to fetch threads:', error)
+      } finally {
+        setIsLoading(false)
+        setIsLoadingMore(false)
+      }
+    },
+    [appId, tenantId, userId],
+  )
+
+  const fetchApiKeys = useCallback(async () => {
+    try {
+      const res = await rpcClient.api.admin.apps[':appId']['api-keys'].$get({
+        param: { appId },
+      })
+      if (res.ok) {
+        const data = await res.json()
+        setApiKeys(data.keys)
+      }
+    } catch (error) {
+      console.error('Failed to fetch API keys:', error)
+    } finally {
+      setIsLoadingKeys(false)
+    }
+  }, [appId])
+
+  // Fetch threads when URL params change
+  useEffect(() => {
+    setNextCursor(null)
+    setHasMore(false)
+    fetchThreads()
+  }, [fetchThreads])
+
+  useEffect(() => {
+    fetchApiKeys()
+  }, [fetchApiKeys])
+
+  const applyFilters = async () => {
+    await Promise.all([
+      setTenantId(pendingTenantId || null),
+      setUserId(pendingUserId || null),
+    ])
+  }
+
+  const clearFilters = async () => {
+    setPendingTenantId('')
+    setPendingUserId('')
+    await Promise.all([setTenantId(null), setUserId(null)])
+  }
+
+  const loadMore = () => {
+    if (nextCursor && !isLoadingMore) {
+      fetchThreads(nextCursor)
+    }
+  }
+
+  const hasFilters = tenantId || userId
+  const standaloneMode = config?.standaloneMode ?? true
+  const hasNoApiKeys =
+    apiKeys.length === 0 &&
+    !isLoadingKeys &&
+    !isLoadingConfig &&
+    !standaloneMode
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Fixed Filter Section */}
+      <div className="bg-background shrink-0 space-y-4 pb-4">
+        {hasNoApiKeys && (
+          <Card>
+            <CardContent className="py-6 text-center">
+              <p className="text-muted-foreground mb-2 text-sm">
+                No API keys yet. Create one to start logging.
+              </p>
+              <Link
+                href={`/apps/${appId}/settings`}
+                className="text-primary text-sm font-medium hover:underline"
+              >
+                Go to Settings
+              </Link>
+            </CardContent>
+          </Card>
+        )}
+
+        <div className="flex items-center justify-between">
+          <p className="text-muted-foreground text-sm">
+            {threads.length} thread{threads.length !== 1 ? 's' : ''} found
+          </p>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setShowFilters(!showFilters)}
+          >
+            <HugeiconsIcon icon={FilterIcon} className="mr-2 h-4 w-4" />
+            Filters
+            {hasFilters && (
+              <span className="bg-primary text-primary-foreground ml-2 rounded-full px-2 py-0.5 text-xs">
+                Active
+              </span>
+            )}
+          </Button>
+        </div>
+
+        {showFilters && (
+          <div className="space-y-4 rounded-lg border p-4">
+            <div className="grid gap-4 md:grid-cols-3">
+              <div className="space-y-2">
+                <Label htmlFor="tenantId">Tenant ID</Label>
+                <Input
+                  id="tenantId"
+                  placeholder="Filter by tenant..."
+                  value={pendingTenantId}
+                  onChange={(e) => setPendingTenantId(e.target.value)}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="userId">User ID</Label>
+                <Input
+                  id="userId"
+                  placeholder="Filter by user..."
+                  value={pendingUserId}
+                  onChange={(e) => setPendingUserId(e.target.value)}
+                />
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <Button size="sm" onClick={applyFilters}>
+                Apply Filters
+              </Button>
+              {hasFilters && (
+                <Button size="sm" variant="outline" onClick={clearFilters}>
+                  <HugeiconsIcon icon={Cancel01Icon} className="mr-2 h-4 w-4" />
+                  Clear
+                </Button>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Table with sticky header - scrollable area */}
+      <div className="min-h-0 flex-1 overflow-auto rounded-md border">
+        <ThreadsTable
+          threads={threads}
+          isLoading={isLoading}
+          appId={appId}
+          hasMore={hasMore}
+          isLoadingMore={isLoadingMore}
+          onLoadMore={loadMore}
+        />
+      </div>
+    </div>
+  )
+}

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

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