@open-mercato/ai-assistant 0.6.1-develop.3291.1.6fad645fd0 → 0.6.1

package/src/modules/ai_assistant/backend/config/ai-assistant/usage/AiUsageStatsPageClient.tsx

@@ -0,0 +1,469 @@
+'use client'
+
+import * as React from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { BarChart2, ChevronRight, Loader2 } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { apiCallOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+
+type DailyRow = {
+  id: string
+  tenantId: string
+  organizationId: string | null
+  day: string
+  agentId: string
+  modelId: string
+  providerId: string
+  inputTokens: string
+  outputTokens: string
+  cachedInputTokens: string
+  reasoningTokens: string
+  stepCount: string
+  turnCount: string
+  sessionCount: string
+  createdAt: string
+  updatedAt: string
+}
+
+type DailyResponse = {
+  rows: DailyRow[]
+  total: number
+}
+
+type SessionSummary = {
+  sessionId: string
+  agentId: string
+  moduleId: string
+  userId: string
+  startedAt: string
+  lastEventAt: string
+  stepCount: number
+  turnCount: number
+  inputTokens: number
+  outputTokens: number
+  cachedInputTokens: number
+  reasoningTokens: number
+}
+
+type SessionsResponse = {
+  sessions: SessionSummary[]
+  total: number
+  limit: number
+  offset: number
+}
+
+type StepEvent = {
+  id: string
+  tenantId: string
+  organizationId: string | null
+  userId: string
+  agentId: string
+  moduleId: string
+  sessionId: string
+  turnId: string
+  stepIndex: number
+  providerId: string
+  modelId: string
+  inputTokens: number
+  outputTokens: number
+  cachedInputTokens: number | null
+  reasoningTokens: number | null
+  finishReason: string | null
+  loopAbortReason: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+type SessionDetailResponse = {
+  events: StepEvent[]
+  total: number
+  sessionId: string
+}
+
+function todayIso(): string {
+  return new Date().toISOString().slice(0, 10)
+}
+
+function daysAgoIso(days: number): string {
+  const date = new Date()
+  date.setDate(date.getDate() - days)
+  return date.toISOString().slice(0, 10)
+}
+
+async function fetchDailyRollup(from: string, to: string): Promise<DailyResponse> {
+  const params = new URLSearchParams({ from, to })
+  const { result, status } = await apiCallOrThrow<DailyResponse>(
+    `/api/ai_assistant/usage/daily?${params}`,
+    { method: 'GET', credentials: 'include' },
+    { errorMessage: 'Failed to load daily token usage' },
+  )
+  if (!result) throw new Error(`Failed to load daily usage (${status})`)
+  return result
+}
+
+async function fetchSessions(from: string, to: string, offset: number): Promise<SessionsResponse> {
+  const params = new URLSearchParams({ from, to, limit: '50', offset: String(offset) })
+  const { result, status } = await apiCallOrThrow<SessionsResponse>(
+    `/api/ai_assistant/usage/sessions?${params}`,
+    { method: 'GET', credentials: 'include' },
+    { errorMessage: 'Failed to load session list' },
+  )
+  if (!result) throw new Error(`Failed to load sessions (${status})`)
+  return result
+}
+
+async function fetchSessionDetail(sessionId: string): Promise<SessionDetailResponse> {
+  const { result, status } = await apiCallOrThrow<SessionDetailResponse>(
+    `/api/ai_assistant/usage/sessions/${encodeURIComponent(sessionId)}`,
+    { method: 'GET', credentials: 'include' },
+    { errorMessage: 'Failed to load session detail' },
+  )
+  if (!result) throw new Error(`Failed to load session detail (${status})`)
+  return result
+}
+
+function sumBigintRows(rows: DailyRow[], field: keyof DailyRow): number {
+  return rows.reduce((acc, row) => acc + parseInt(String(row[field] ?? '0'), 10), 0)
+}
+
+function formatNumber(value: number): string {
+  return value.toLocaleString()
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleString()
+}
+
+function shortId(id: string): string {
+  return id.slice(0, 8)
+}
+
+export function AiUsageStatsPageClient() {
+  const t = useT()
+
+  const defaultFrom = daysAgoIso(30)
+  const defaultTo = todayIso()
+
+  const [from, setFrom] = React.useState(defaultFrom)
+  const [to, setTo] = React.useState(defaultTo)
+  const [appliedFrom, setAppliedFrom] = React.useState(defaultFrom)
+  const [appliedTo, setAppliedTo] = React.useState(defaultTo)
+  const [sessionsOffset, setSessionsOffset] = React.useState(0)
+  const [selectedSessionId, setSelectedSessionId] = React.useState<string | null>(null)
+
+  const dailyQuery = useQuery({
+    queryKey: ['ai-usage-daily', appliedFrom, appliedTo],
+    queryFn: () => fetchDailyRollup(appliedFrom, appliedTo),
+  })
+
+  const sessionsQuery = useQuery({
+    queryKey: ['ai-usage-sessions', appliedFrom, appliedTo, sessionsOffset],
+    queryFn: () => fetchSessions(appliedFrom, appliedTo, sessionsOffset),
+  })
+
+  const sessionDetailQuery = useQuery({
+    queryKey: ['ai-usage-session-detail', selectedSessionId],
+    queryFn: () => fetchSessionDetail(selectedSessionId!),
+    enabled: selectedSessionId !== null,
+  })
+
+  function applyFilter() {
+    setSessionsOffset(0)
+    setAppliedFrom(from)
+    setAppliedTo(to)
+  }
+
+  const dailyRows = dailyQuery.data?.rows ?? []
+  const totalInputTokens = sumBigintRows(dailyRows, 'inputTokens')
+  const totalOutputTokens = sumBigintRows(dailyRows, 'outputTokens')
+  const totalSteps = sumBigintRows(dailyRows, 'stepCount')
+  const totalSessions = sumBigintRows(dailyRows, 'sessionCount')
+
+  return (
+    <div className="space-y-6 max-w-5xl">
+      <div className="flex items-center gap-2">
+        <BarChart2 className="text-muted-foreground" size={20} />
+        <h2 className="text-lg font-semibold">
+          {t('ai_assistant.usage.title', 'Token Usage Statistics')}
+        </h2>
+      </div>
+
+      {/* Date range filter */}
+      <div className="flex items-end gap-4 flex-wrap">
+        <div className="flex flex-col gap-1.5">
+          <Label htmlFor="usage-from">
+            {t('ai_assistant.usage.from', 'From')}
+          </Label>
+          <Input
+            id="usage-from"
+            type="date"
+            value={from}
+            onChange={(e) => setFrom(e.target.value)}
+            className="w-40"
+          />
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <Label htmlFor="usage-to">
+            {t('ai_assistant.usage.to', 'To')}
+          </Label>
+          <Input
+            id="usage-to"
+            type="date"
+            value={to}
+            onChange={(e) => setTo(e.target.value)}
+            className="w-40"
+          />
+        </div>
+        <Button variant="secondary" onClick={applyFilter}>
+          {t('ai_assistant.usage.apply', 'Apply')}
+        </Button>
+      </div>
+
+      {/* Summary tiles */}
+      {dailyQuery.isLoading && (
+        <div className="flex items-center gap-2 text-muted-foreground text-sm">
+          <Loader2 size={14} className="animate-spin" />
+          {t('ai_assistant.usage.loading', 'Loading usage data...')}
+        </div>
+      )}
+      {dailyQuery.isError && (
+        <p className="text-status-error-text text-sm">
+          {t('ai_assistant.usage.error', 'Failed to load usage data.')}
+        </p>
+      )}
+      {dailyQuery.isSuccess && (
+        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+          {[
+            { label: t('ai_assistant.usage.inputTokens', 'Input tokens'), value: formatNumber(totalInputTokens) },
+            { label: t('ai_assistant.usage.outputTokens', 'Output tokens'), value: formatNumber(totalOutputTokens) },
+            { label: t('ai_assistant.usage.steps', 'Steps'), value: formatNumber(totalSteps) },
+            { label: t('ai_assistant.usage.sessions', 'Sessions'), value: formatNumber(totalSessions) },
+          ].map((tile) => (
+            <div key={tile.label} className="rounded-lg border border-border p-4 space-y-1">
+              <p className="text-muted-foreground text-xs">{tile.label}</p>
+              <p className="font-semibold text-xl">{tile.value}</p>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Daily breakdown table */}
+      {dailyQuery.isSuccess && dailyRows.length > 0 && (
+        <div className="space-y-2">
+          <h3 className="text-sm font-medium text-muted-foreground">
+            {t('ai_assistant.usage.dailyBreakdown', 'Daily breakdown')}
+          </h3>
+          <div className="overflow-x-auto rounded-lg border border-border">
+            <table className="min-w-full text-sm">
+              <thead>
+                <tr className="border-b border-border bg-muted/40">
+                  <th className="px-3 py-2 text-left font-medium text-muted-foreground">
+                    {t('ai_assistant.usage.col.day', 'Day')}
+                  </th>
+                  <th className="px-3 py-2 text-left font-medium text-muted-foreground">
+                    {t('ai_assistant.usage.col.agent', 'Agent')}
+                  </th>
+                  <th className="px-3 py-2 text-right font-medium text-muted-foreground">
+                    {t('ai_assistant.usage.col.inputTokens', 'Input')}
+                  </th>
+                  <th className="px-3 py-2 text-right font-medium text-muted-foreground">
+                    {t('ai_assistant.usage.col.outputTokens', 'Output')}
+                  </th>
+                  <th className="px-3 py-2 text-right font-medium text-muted-foreground">
+                    {t('ai_assistant.usage.col.sessions', 'Sessions')}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {dailyRows.map((row) => (
+                  <tr key={row.id} className="border-b border-border last:border-b-0">
+                    <td className="px-3 py-2 tabular-nums">{row.day}</td>
+                    <td className="px-3 py-2 font-mono text-xs">{row.agentId}</td>
+                    <td className="px-3 py-2 text-right tabular-nums">{formatNumber(parseInt(row.inputTokens, 10))}</td>
+                    <td className="px-3 py-2 text-right tabular-nums">{formatNumber(parseInt(row.outputTokens, 10))}</td>
+                    <td className="px-3 py-2 text-right tabular-nums">{row.sessionCount}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* Sessions list */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          {t('ai_assistant.usage.sessionsList', 'Sessions')}
+        </h3>
+        {sessionsQuery.isLoading && (
+          <div className="flex items-center gap-2 text-muted-foreground text-sm">
+            <Loader2 size={14} className="animate-spin" />
+            {t('ai_assistant.usage.loadingSessions', 'Loading sessions...')}
+          </div>
+        )}
+        {sessionsQuery.isError && (
+          <p className="text-status-error-text text-sm">
+            {t('ai_assistant.usage.errorSessions', 'Failed to load sessions.')}
+          </p>
+        )}
+        {sessionsQuery.isSuccess && (sessionsQuery.data?.sessions ?? []).length === 0 && (
+          <p className="text-muted-foreground text-sm">
+            {t('ai_assistant.usage.noSessions', 'No sessions found for the selected period.')}
+          </p>
+        )}
+        {sessionsQuery.isSuccess && (sessionsQuery.data?.sessions ?? []).length > 0 && (
+          <>
+            <div className="overflow-x-auto rounded-lg border border-border">
+              <table className="min-w-full text-sm">
+                <thead>
+                  <tr className="border-b border-border bg-muted/40">
+                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
+                      {t('ai_assistant.usage.col.session', 'Session')}
+                    </th>
+                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
+                      {t('ai_assistant.usage.col.agent', 'Agent')}
+                    </th>
+                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
+                      {t('ai_assistant.usage.col.startedAt', 'Started')}
+                    </th>
+                    <th className="px-3 py-2 text-right font-medium text-muted-foreground">
+                      {t('ai_assistant.usage.col.inputTokens', 'Input')}
+                    </th>
+                    <th className="px-3 py-2 text-right font-medium text-muted-foreground">
+                      {t('ai_assistant.usage.col.outputTokens', 'Output')}
+                    </th>
+                    <th className="px-3 py-2 text-right font-medium text-muted-foreground">
+                      {t('ai_assistant.usage.col.steps', 'Steps')}
+                    </th>
+                    <th className="w-8" />
+                  </tr>
+                </thead>
+                <tbody>
+                  {(sessionsQuery.data?.sessions ?? []).map((session) => (
+                    <tr
+                      key={session.sessionId}
+                      className="border-b border-border last:border-b-0 cursor-pointer hover:bg-muted/30 transition-colors"
+                      onClick={() => setSelectedSessionId(session.sessionId)}
+                    >
+                      <td className="px-3 py-2 font-mono text-xs">{shortId(session.sessionId)}…</td>
+                      <td className="px-3 py-2 font-mono text-xs">{session.agentId}</td>
+                      <td className="px-3 py-2 text-muted-foreground text-xs">{formatDate(session.startedAt)}</td>
+                      <td className="px-3 py-2 text-right tabular-nums">{formatNumber(session.inputTokens)}</td>
+                      <td className="px-3 py-2 text-right tabular-nums">{formatNumber(session.outputTokens)}</td>
+                      <td className="px-3 py-2 text-right tabular-nums">{session.stepCount}</td>
+                      <td className="px-3 py-2 text-muted-foreground">
+                        <ChevronRight size={14} />
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="secondary"
+                size="sm"
+                disabled={sessionsOffset === 0}
+                onClick={() => setSessionsOffset(Math.max(0, sessionsOffset - 50))}
+              >
+                {t('ai_assistant.usage.prev', 'Previous')}
+              </Button>
+              <span className="text-muted-foreground text-sm">
+                {sessionsOffset + 1}–{sessionsOffset + (sessionsQuery.data?.sessions.length ?? 0)}
+                {sessionsQuery.data?.total !== undefined ? ` / ${sessionsQuery.data.total}` : ''}
+              </span>
+              <Button
+                variant="secondary"
+                size="sm"
+                disabled={
+                  (sessionsQuery.data?.sessions.length ?? 0) < 50 ||
+                  sessionsOffset + 50 >= (sessionsQuery.data?.total ?? 0)
+                }
+                onClick={() => setSessionsOffset(sessionsOffset + 50)}
+              >
+                {t('ai_assistant.usage.next', 'Next')}
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Session drill-down dialog */}
+      <Dialog
+        open={selectedSessionId !== null}
+        onOpenChange={(open) => { if (!open) setSelectedSessionId(null) }}
+      >
+        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              {t('ai_assistant.usage.sessionDetail', 'Session detail')}
+              {selectedSessionId && (
+                <span className="ml-2 font-mono text-sm text-muted-foreground">
+                  {shortId(selectedSessionId)}…
+                </span>
+              )}
+            </DialogTitle>
+          </DialogHeader>
+          <div className="mt-4">
+            {sessionDetailQuery.isLoading && (
+              <div className="flex items-center gap-2 text-muted-foreground text-sm">
+                <Loader2 size={14} className="animate-spin" />
+                {t('ai_assistant.usage.loadingDetail', 'Loading session events...')}
+              </div>
+            )}
+            {sessionDetailQuery.isError && (
+              <p className="text-status-error-text text-sm">
+                {t('ai_assistant.usage.errorDetail', 'Failed to load session events.')}
+              </p>
+            )}
+            {sessionDetailQuery.isSuccess && (
+              <div className="overflow-x-auto rounded-lg border border-border">
+                <table className="min-w-full text-sm">
+                  <thead>
+                    <tr className="border-b border-border bg-muted/40">
+                      <th className="px-3 py-2 text-left font-medium text-muted-foreground">
+                        {t('ai_assistant.usage.col.step', 'Step')}
+                      </th>
+                      <th className="px-3 py-2 text-left font-medium text-muted-foreground">
+                        {t('ai_assistant.usage.col.model', 'Model')}
+                      </th>
+                      <th className="px-3 py-2 text-right font-medium text-muted-foreground">
+                        {t('ai_assistant.usage.col.inputTokens', 'Input')}
+                      </th>
+                      <th className="px-3 py-2 text-right font-medium text-muted-foreground">
+                        {t('ai_assistant.usage.col.outputTokens', 'Output')}
+                      </th>
+                      <th className="px-3 py-2 text-left font-medium text-muted-foreground">
+                        {t('ai_assistant.usage.col.finishReason', 'Finish')}
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {(sessionDetailQuery.data?.events ?? []).map((event) => (
+                      <tr key={event.id} className="border-b border-border last:border-b-0">
+                        <td className="px-3 py-2 tabular-nums">{event.stepIndex}</td>
+                        <td className="px-3 py-2 font-mono text-xs">{event.modelId}</td>
+                        <td className="px-3 py-2 text-right tabular-nums">{formatNumber(event.inputTokens)}</td>
+                        <td className="px-3 py-2 text-right tabular-nums">{formatNumber(event.outputTokens)}</td>
+                        <td className="px-3 py-2 text-muted-foreground text-xs">{event.finishReason ?? '—'}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

package/src/modules/ai_assistant/backend/config/ai-assistant/usage/page.meta.ts

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const usageIcon = React.createElement(
+  'svg',
+  { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' },
+  React.createElement('path', { d: 'M3 3v18h18' }),
+  React.createElement('path', { d: 'M7 16l4-4 4 4 4-4' }),
+)
+
+export const metadata = {
+  requireAuth: true,
+  requireFeatures: ['ai_assistant.settings.manage'],
+  pageTitle: 'AI Usage',
+  pageTitleKey: 'ai_assistant.usage.navTitle',
+  pageGroup: 'Module Configs',
+  pageGroupKey: 'settings.sections.moduleConfigs',
+  pageOrder: 431,
+  icon: usageIcon,
+  pageContext: 'settings' as const,
+  breadcrumb: [
+    { label: 'AI Usage', labelKey: 'ai_assistant.usage.navTitle' },
+  ],
+} as const

package/src/modules/ai_assistant/backend/config/ai-assistant/usage/page.tsx

@@ -0,0 +1,12 @@
+import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { AiUsageStatsPageClient } from './AiUsageStatsPageClient'
+
+export default async function AiUsageStatsPage() {
+  return (
+    <Page>
+      <PageBody>
+        <AiUsageStatsPageClient />
+      </PageBody>
+    </Page>
+  )
+}

package/src/modules/ai_assistant/cli.ts

@@ -338,6 +338,23 @@ const testTools: ModuleCli = {
   },
 }
 
+const runTokenUsagePrune: ModuleCli = {
+  command: 'run-token-usage-prune',
+  async run() {
+    await ensureBootstrap()
+    const container = await createRequestContainer()
+
+    const { runTokenUsagePrune: runPrune } = await import(
+      './workers/ai-token-usage-prune'
+    )
+
+    const em = container.resolve<import('@mikro-orm/postgresql').EntityManager>('em')
+    const summary = await runPrune({ em })
+
+    console.log('[ai-token-usage-prune] Prune complete:', summary)
+  },
+}
+
 export default [
   mcpServe,
   mcpServeHttp,
@@ -345,5 +362,6 @@ export default [
   listTools,
   entityGraph,
   runPendingActionCleanup,
+  runTokenUsagePrune,
   testTools,
 ]

package/src/modules/ai_assistant/components/AiAssistantSettingsPageClient.tsx

@@ -67,7 +67,7 @@ type SettingsResponse = {
 type AgentResolution = {
   agentId: string
   moduleId: string
-  allowRuntimeModelOverride: boolean
+  allowRuntimeOverride: boolean
   providerId: string
   modelId: string
   baseURL: string | null