@allbluecn/admin-app 0.1.0

package/src/components/market/market-app-form.tsx

@@ -0,0 +1,237 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import { useEffect, useState } from "react"
+import { useTranslation } from 'react-i18next'
+import { useTheme } from "next-themes"
+import { MarketAppFormData } from "@/lib/anyhub/types"
+import { CAPABILITY_GROUPS } from "@/lib/anyhub/capabilities"
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { toast } from '@/components/ui/sonner'
+
+interface MarketAppFormProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  editData?: { id: string; data: MarketAppFormData } | null
+  onSuccess: () => void
+}
+
+const CATEGORY_KEYS = ["productivity", "ai-assistant", "project-mgmt", "docs-collab", "data-analysis", "other"] as const
+
+const emptyForm: MarketAppFormData = {
+  name: "",
+  displayName: "",
+  description: "",
+  entryUrl: "",
+  icon: "",
+  category: "",
+  tags: "",
+  capabilities: {},
+}
+
+export function MarketAppForm({ open, onOpenChange, editData, onSuccess }: MarketAppFormProps) {
+  const [form, setForm] = useState<MarketAppFormData>(emptyForm)
+  const [loading, setLoading] = useState(false)
+  const { t } = useTranslation('common')
+
+  useEffect(() => {
+    if (editData) {
+      setForm(editData.data)
+    } else {
+      setForm(emptyForm)
+    }
+  }, [editData, open])
+
+  const updateField = (field: keyof MarketAppFormData, value: string) => {
+    setForm((prev) => ({ ...prev, [field]: value }))
+  }
+
+  const toggleCapability = (capId: string) => {
+    setForm((prev) => ({
+      ...prev,
+      capabilities: { ...prev.capabilities, [capId]: !prev.capabilities[capId] },
+    }))
+  }
+
+  const handleSubmit = async () => {
+    if (!form.name.trim() || !form.displayName.trim() || !form.entryUrl.trim()) {
+      toast.error(t('market.form.fillRequired'))
+      return
+    }
+
+    setLoading(true)
+    try {
+      const url = editData ? `/api/anyhub/market/${editData.id}` : "/api/anyhub/market"
+      const method = editData ? "PATCH" : "POST"
+      const res = await fetch(url, {
+        method,
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(form),
+      })
+
+      if (!res.ok) {
+        const err = await res.json()
+        throw new Error(err.error || t('market.form.operationFailed'))
+      }
+
+      toast.success(editData ? t('market.form.updated') : t('market.form.created'))
+      onOpenChange(false)
+      onSuccess()
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : t('market.form.operationFailed'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{editData ? t('market.form.edit') : t('market.form.create')}</DialogTitle>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label>{t('market.form.name')}</Label>
+            <Input
+              value={form.name}
+              onChange={(e) => updateField("name", e.target.value)}
+              placeholder={t('market.form.namePlaceholder')}
+              disabled={!!editData}
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label>{t('market.form.displayName')}</Label>
+            <Input
+              value={form.displayName}
+              onChange={(e) => updateField("displayName", e.target.value)}
+              placeholder={t('market.form.displayNamePlaceholder')}
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label>{t('market.form.entryUrl')}</Label>
+            <Input
+              value={form.entryUrl}
+              onChange={(e) => updateField("entryUrl", e.target.value)}
+              placeholder="https://..."
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label>{t('market.form.description')}</Label>
+            <Input
+              value={form.description || ""}
+              onChange={(e) => updateField("description", e.target.value)}
+              placeholder={t('market.form.descriptionPlaceholder')}
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label>{t('market.form.icon')}</Label>
+            <Input
+              value={form.icon || ""}
+              onChange={(e) => updateField("icon", e.target.value)}
+              placeholder={t('market.form.iconPlaceholder')}
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label>{t('market.form.category')}</Label>
+            <Select value={form.category || ""} onValueChange={(v) => updateField("category", v === "__none__" ? "" : v)}>
+              <SelectTrigger>
+                <SelectValue placeholder={t('market.form.categoryPlaceholder')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__none__">{t('common.none')}</SelectItem>
+                {CATEGORY_KEYS.map((k) => (
+                  <SelectItem key={k} value={t(`market.categories.${k}`)}>
+                    {t(`market.categories.${k}`)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="grid gap-2">
+            <Label>{t('market.form.tags')}</Label>
+            <Input
+              value={form.tags || ""}
+              onChange={(e) => updateField("tags", e.target.value)}
+              placeholder={t('market.form.tagsPlaceholder')}
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label>{t('market.form.capabilities')}</Label>
+            <div className="space-y-3 rounded-md border p-3">
+              {CAPABILITY_GROUPS.map((group) => (
+                <div key={group.id}>
+                  <p className="mb-1.5 text-sm font-medium">{group.label}</p>
+                  <div className="flex flex-wrap gap-3">
+                    {group.capabilities.map((cap) => (
+                      <label
+                        key={cap.id}
+                        className="flex cursor-pointer items-center gap-1.5 text-sm"
+                      >
+                        <input
+                          type="checkbox"
+                          checked={!!form.capabilities[cap.id]}
+                          onChange={() => toggleCapability(cap.id)}
+                          className="rounded border-input"
+                        />
+                        {cap.label}
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={handleSubmit} disabled={loading}>
+            {loading ? t('status.loading') : editData ? t('common.save') : t('common.create')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/market/market-app-list.tsx

@@ -0,0 +1,156 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useCallback, useEffect, useState } from "react"
+import { useTranslation } from 'react-i18next'
+import { DataTable } from "@/components/data-table/data-table"
+import { getMarketColumns, MarketAppRow } from "./columns"
+import { MarketAppForm } from "./market-app-form"
+import { MarketAppFormData } from "@/lib/anyhub/types"
+import { Button } from "@/components/ui/button"
+import { PlusIcon } from "lucide-react"
+import { toast } from '@/components/ui/sonner'
+import { listMarketAppsFn, updateMarketAppFn, deleteMarketAppFn } from "@/server/serverFns/anyhub/market"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+
+export function MarketAppList() {
+  const { t } = useTranslation('common')
+  const [apps, setApps] = useState<MarketAppRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [formOpen, setFormOpen] = useState(false)
+  const [editData, setEditData] = useState<{ id: string; data: MarketAppFormData } | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<MarketAppRow | null>(null)
+
+  const fetchApps = useCallback(async () => {
+    try {
+      const data = await listMarketAppsFn({ data: {} })
+      setApps(data.items.map((app) => ({
+        ...app,
+        capabilities: (app.capabilities || {}) as Record<string, boolean>,
+        createdAt: app.createdAt.toISOString(),
+        updatedAt: app.updatedAt?.toISOString() ?? '',
+        publishedAt: app.publishedAt?.toISOString() ?? null,
+      })))
+    } catch {
+      toast.error(t('market.fetchFailed'))
+    } finally {
+      setLoading(false)
+    }
+  }, [t])
+
+  useEffect(() => {
+    fetchApps()
+  }, [fetchApps])
+
+  const handleEdit = (app: MarketAppRow) => {
+    setEditData({
+      id: app.id,
+      data: {
+        name: app.name,
+        displayName: app.displayName,
+        description: app.description || "",
+        entryUrl: app.entryUrl,
+        icon: app.icon || "",
+        category: app.category || "",
+        tags: app.tags || "",
+        capabilities: app.capabilities || {},
+      },
+    })
+    setFormOpen(true)
+  }
+
+  const handleToggleStatus = async (app: MarketAppRow) => {
+    const newStatus = app.status === "PUBLISHED" ? "UNPUBLISHED" : "PUBLISHED"
+    try {
+      await updateMarketAppFn({ data: { id: app.id, isPublished: newStatus === "PUBLISHED" } })
+      toast.success(t('market.statusUpdated', { status: newStatus === "PUBLISHED" ? 'published' : 'unpublished' }))
+      fetchApps()
+    } catch {
+      toast.error(t('market.operationFailed'))
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return
+    try {
+      await deleteMarketAppFn({ data: { id: deleteTarget.id } })
+      toast.success(t('market.deleted'))
+      setDeleteTarget(null)
+      fetchApps()
+    } catch {
+      toast.error(t('market.deleteFailed'))
+    }
+  }
+
+  const columns = getMarketColumns(handleEdit, handleToggleStatus, (app) => setDeleteTarget(app))
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">{t('market.title')}</h1>
+        <Button
+          onClick={() => {
+            setEditData(null)
+            setFormOpen(true)
+          }}
+        >
+          <PlusIcon className="mr-2 size-4" />
+          {t('market.addApp')}
+        </Button>
+      </div>
+
+      {loading ? (
+        <p className="text-muted-foreground">{t('common.loading')}</p>
+      ) : (
+        <DataTable columns={columns} data={apps} />
+      )}
+
+      <MarketAppForm
+        open={formOpen}
+        onOpenChange={setFormOpen}
+        editData={editData}
+        onSuccess={fetchApps}
+      />
+
+      <AlertDialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('market.deleteConfirmTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('market.deleteConfirmDesc', { name: deleteTarget?.displayName })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete} className="bg-destructive text-white hover:bg-destructive/90">
+              {t('common.delete')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}

package/src/components/monitoring/error-list.tsx

@@ -0,0 +1,143 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { DataTable, type AdminColumnDef } from '@/components/data-table/data-table'
+
+function formatRelativeTime(dateStr: string, t: (key: string, params?: Record<string, number | string>) => string): string {
+  const now = new Date()
+  const target = new Date(dateStr)
+  const diff = now.getTime() - target.getTime()
+  const seconds = Math.floor(diff / 1000)
+  if (seconds < 60) return t('common.timeAgo.seconds', { count: seconds })
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return t('common.timeAgo.minutes', { count: minutes })
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return t('common.timeAgo.hours', { count: hours })
+  const days = Math.floor(hours / 24)
+  return t('common.timeAgo.days', { count: days })
+}
+
+interface ErrorItem {
+  id: string
+  errorName: string
+  errorMessage: string
+  stackTrace?: string | null
+  count: number
+  firstSeen: string
+  lastSeen: string
+  context?: Record<string, unknown>
+}
+
+interface ErrorListProps {
+  errors: ErrorItem[]
+}
+
+export function ErrorList({ errors }: ErrorListProps) {
+  const { t } = useTranslation('common')
+  const [expandedId, setExpandedId] = useState<string | null>(null)
+
+  const columns: AdminColumnDef<ErrorItem>[] = [
+    {
+      header: t('errorList.columns.lastSeen'),
+      accessorKey: 'lastSeen',
+      meta: { style: { width: 60 } },
+      cell: ({ row }: { row: { original: ErrorItem } }) => (
+        <span className="text-xs text-muted-foreground">
+          {formatRelativeTime(row.original.lastSeen, t)}
+        </span>
+      ),
+    },
+    {
+      header: t('errorList.columns.errorName'),
+      accessorKey: 'errorName',
+      meta: { style: { width: 120 } },
+      cell: ({ row }: { row: { original: ErrorItem } }) => (
+        <span className="font-medium text-xs block truncate">
+          {row.original.errorName}
+        </span>
+      ),
+    },
+    {
+      header: t('errorList.columns.errorMessage'),
+      accessorKey: 'errorMessage',
+      meta: { style: { width: 280 } },
+      cell: ({ row }: { row: { original: ErrorItem } }) => {
+        const msg = row.original.errorMessage
+        return <span className="text-xs block truncate">{msg}</span>
+      },
+    },
+    {
+      header: t('errorList.columns.count'),
+      accessorKey: 'count',
+      meta: { style: { width: 60, textAlign: 'right' } },
+      cell: ({ row }: { row: { original: ErrorItem } }) => (
+        <span className="font-medium">{row.original.count}</span>
+      ),
+    },
+    {
+      header: t('errorList.columns.firstSeen'),
+      accessorKey: 'firstSeen',
+      meta: { style: { width: 60 } },
+      cell: ({ row }: { row: { original: ErrorItem } }) => (
+        <span className="text-xs text-muted-foreground">
+          {formatRelativeTime(row.original.firstSeen, t)}
+        </span>
+      ),
+    },
+  ]
+
+  return (
+    <div className="space-y-3">
+      <DataTable
+        columns={columns}
+        data={errors}
+        onRowClick={(item) => {
+          setExpandedId(expandedId === item.id ? null : item.id)
+        }}
+      />
+      {expandedId && (
+        <ErrorDetail errors={errors} expandedId={expandedId} t={t} />
+      )}
+    </div>
+  )
+}
+
+function ErrorDetail({ errors, expandedId, t }: { errors: ErrorItem[]; expandedId: string; t: (key: string) => string }) {
+  const error = errors.find((e) => e.id === expandedId)
+  if (!error) return null
+
+  return (
+    <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+      <div className="font-medium text-sm">{t('errorList.detail.title')}</div>
+      {error.stackTrace && (
+        <pre className="text-xs bg-background rounded-md p-3 overflow-auto max-h-40 border">
+          {error.stackTrace}
+        </pre>
+      )}
+      {error.context && JSON.stringify(error.context, null, 2) && (
+        <div>
+          <div className="text-xs font-medium text-muted-foreground mb-1">{t('errorList.detail.context')}</div>
+          <pre className="text-xs bg-background rounded-md p-3 overflow-auto border">
+            {JSON.stringify(error.context, null, 2)}
+          </pre>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/monitoring/health-cards.tsx

@@ -0,0 +1,152 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useTranslation } from 'react-i18next'
+
+interface HealthCardData {
+  status?: string
+  checks?: {
+    uptime?: number
+    database?: {
+      status?: string
+      latency?: number
+      error?: string
+    }
+    memory?: {
+      rss?: number
+      heapUsed?: number
+      heapTotal?: number
+    }
+    cpu?: {
+      usage?: number
+      cores?: number
+      model?: string
+    }
+    load?: {
+      one?: number
+      five?: number
+      fifteen?: number
+    }
+    disk?: {
+      total?: number
+      free?: number
+      usedPct?: number
+    }
+    system?: {
+      platform?: string
+      type?: string
+      release?: string
+      nodeVersion?: string
+    }
+  }
+  requestStats?: {
+    total?: number
+    avgDuration?: number
+  }
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes}B`
+  if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)}KB`
+  return `${(bytes / 1048576).toFixed(1)}MB`
+}
+
+interface HealthCardsProps {
+  health: HealthCardData
+}
+
+export function HealthCards({ health }: HealthCardsProps) {
+  const { t } = useTranslation('common')
+  const db = health.checks?.database
+  const mem = health.checks?.memory
+  const cpu = health.checks?.cpu
+  const load = health.checks?.load
+  const disk = health.checks?.disk
+  const system = health.checks?.system
+
+  return (
+    <div className="grid gap-3 md:grid-cols-3 lg:grid-cols-5">
+      <div className="rounded-lg border p-3">
+        <p className="text-xs text-muted-foreground">{t('monitoring.healthCards.database')}</p>
+        <p className={`text-sm font-semibold mt-1 ${db?.status === 'connected' ? 'text-green-600' : 'text-red-600'}`}>
+          {db?.status === 'connected' ? t('monitoring.healthCards.connected') : t('monitoring.healthCards.disconnected')}
+        </p>
+        {db?.status === 'connected' && db.latency != null && (
+          <p className="text-xs text-muted-foreground mt-0.5">{t('monitoring.healthCards.latency', { latency: db.latency })}ms</p>
+        )}
+      </div>
+
+      <div className="rounded-lg border p-3">
+        <p className="text-xs text-muted-foreground">{t('monitoring.healthCards.memoryRSS')}</p>
+        <p className="text-sm font-semibold mt-1">
+          {mem?.rss ? formatBytes(mem.rss) : '-'}
+        </p>
+      </div>
+
+      <div className="rounded-lg border p-3">
+        <p className="text-xs text-muted-foreground">{t('monitoring.healthCards.heapUsage')}</p>
+        <p className="text-sm font-semibold mt-1">
+          {mem?.heapUsed && mem?.heapTotal ? `${((mem.heapUsed / mem.heapTotal) * 100).toFixed(1)}%` : '-'}
+        </p>
+        <p className="text-xs text-muted-foreground mt-0.5">
+          {mem?.heapUsed ? formatBytes(mem.heapUsed) : '-'} / {mem?.heapTotal ? formatBytes(mem.heapTotal) : '-'}
+        </p>
+      </div>
+
+      <div className="rounded-lg border p-3">
+        <p className="text-xs text-muted-foreground">{t('monitoring.healthCards.cpuCores', { cores: cpu?.cores })}</p>
+        <p className="text-sm font-semibold mt-1">
+          {cpu?.usage != null ? `${cpu.usage.toFixed(1)}%` : '-'}
+        </p>
+        <p className="text-xs text-muted-foreground mt-0.5">
+          {cpu?.model ? cpu.model.split(' ').slice(0, 3).join(' ') : '-'}
+        </p>
+      </div>
+
+      <div className="rounded-lg border p-3">
+        <p className="text-xs text-muted-foreground">{t('monitoring.healthCards.systemLoad')}</p>
+        <p className="text-sm font-semibold mt-1">
+          {load?.one != null ? `${load.one.toFixed(2)} / ${load.five?.toFixed(2) ?? '-'} / ${load.fifteen?.toFixed(2) ?? '-'}` : '-'}
+        </p>
+      </div>
+
+      {disk && (
+        <div className="rounded-lg border p-3">
+          <p className="text-xs text-muted-foreground">{t('monitoring.healthCards.diskUsage')}</p>
+          <p className="text-sm font-semibold mt-1">
+            {disk.usedPct != null ? `${disk.usedPct.toFixed(1)}%` : '-'}
+          </p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            {t('monitoring.healthCards.available', { free: disk.free != null ? formatBytes(disk.free) : '-', total: disk.total != null ? formatBytes(disk.total) : '-' })}
+          </p>
+        </div>
+      )}
+
+      {system && (
+        <div className="rounded-lg border p-3">
+          <p className="text-xs text-muted-foreground">{t('monitoring.healthCards.runtime')}</p>
+          <p className="text-sm font-semibold mt-1">
+            {system.platform} {system.release}
+          </p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            {system.nodeVersion}
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}