@stacksjs/defaults 0.70.228 → 0.70.230

package/views/dashboard/data/users.stx

@@ -1,279 +1,8 @@
 @extends('layouts/default')
 
 @section('content')
-<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
-  <div class="mb-8 px-4 sm:px-6 lg:px-8">
-    <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Last 30 days</h3>
-    <dl class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-5">
-      <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
-        <dt>
-          <div class="absolute p-3 bg-blue-500 rounded-md">
-            <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /></svg>
-          </div>
-          <p class="ml-16 font-medium text-gray-500 text-sm truncate">Total Users</p>
-        </dt>
-        <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
-          <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">12,345</p>
-          <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm">678</p>
-        </dd>
-      </div>
-      <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
-        <dt>
-          <div class="absolute p-3 bg-green-500 rounded-md">
-            <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
-          </div>
-          <p class="ml-16 font-medium text-gray-500 text-sm truncate">Active Sessions</p>
-        </dt>
-        <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
-          <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">4,938</p>
-          <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm">271</p>
-        </dd>
-      </div>
-    </dl>
-  </div>
-
-  <div class="mb-8 px-4 sm:px-6 lg:px-8">
-    <div class="bg-white dark:bg-neutral-700 rounded-lg shadow">
-      <div class="p-6">
-        <div class="flex items-center justify-between mb-6">
-          <div>
-            <h3 class="font-medium text-base text-gray-900 dark:text-neutral-100">User Growth & Activity</h3>
-            <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Track user registrations and active sessions over time</p>
-          </div>
-          <div class="flex items-center space-x-4">
-            <select x-model="timeRange" @change="changeTimeRange()" class="pl-3 pr-8 py-1.5 h-9 text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600">
-              <option value="7">Last 7 days</option>
-              <option value="30">Last 30 days</option>
-              <option value="90">Last 90 days</option>
-              <option value="365">Last year</option>
-            </select>
-          </div>
-        </div>
-        <div class="relative h-[400px]">
-          <div :show="isLoading" class="flex absolute inset-0 z-10 items-center justify-center bg-opacity-75 bg-white dark:bg-neutral-700 dark:bg-opacity-75">
-            <div class="h-8 w-8 border-b-2 border-blue-500 rounded-full animate-spin"></div>
-          </div>
-          <canvas id="user_growth_chart"></canvas>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="mb-8 px-4 sm:px-6 lg:px-8">
-    <div class="bg-white dark:bg-neutral-700 rounded-lg shadow">
-      <div class="p-6">
-        <div class="flex items-center justify-between mb-6">
-          <div>
-            <h3 class="font-medium text-base text-gray-900 dark:text-neutral-100">User Model Relationships</h3>
-            <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Click any model to view details.</p>
-          </div>
-        </div>
-        <div class="flex">
-          <div class="flex relative flex-1 flex-wrap gap-4 items-start justify-start p-4 h-[400px] bg-gray-50 dark:bg-neutral-600 rounded-lg">
-            <template :for="model in models">
-              <button type="button" @click="selectModel(model)" class="inline-flex flex-col items-center px-4 py-3 bg-white dark:bg-neutral-800 hover:bg-gray-100 dark:hover:bg-neutral-700 ring-1 ring-gray-200 rounded-lg dark:ring-neutral-600 shadow-sm">
-                <span class="text-3xl">{{ model.emoji }}</span>
-                <span class="mt-2 font-medium text-gray-900 text-sm dark:text-neutral-100">{{ model.name }}</span>
-              </button>
-            </template>
-          </div>
-
-          <div :show="selectedModel() !== null" class="ml-6 p-4 w-64 bg-gray-50 dark:bg-neutral-600 rounded-lg">
-            <div class="flex items-center mb-4">
-              <span class="mr-2 text-2xl">{{ selectedModel()?.emoji }}</span>
-              <h4 class="font-semibold text-gray-900 text-lg dark:text-neutral-100">{{ selectedModel()?.name }}</h4>
-            </div>
-            <div class="mb-4">
-              <p class="text-gray-600 text-sm dark:text-neutral-400">{{ selectedModel()?.description }}</p>
-            </div>
-            <div class="mb-4">
-              <h5 class="mb-2 font-medium text-gray-700 text-sm dark:text-neutral-300">Properties</h5>
-              <ul class="space-y-1">
-                <template :for="prop in (selectedModel?.properties ?? [])">
-                  <li class="font-mono text-gray-600 text-sm dark:text-neutral-400">{{ prop }}</li>
-                </template>
-              </ul>
-            </div>
-            <div class="mb-6">
-              <h5 class="mb-2 font-medium text-gray-700 text-sm dark:text-neutral-300">Relationships</h5>
-              <ul class="space-y-1">
-                <template :for="rel in (selectedModel?.relationships ?? [])">
-                  <li class="font-mono text-sm">
-                    <a :href="resolveModelRoute(rel)" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">{{ rel }}</a>
-                  </li>
-                </template>
-              </ul>
-            </div>
-            <a :href="resolveModelRoute(selectedModel()?.id ?? '')" class="block px-4 py-2 w-full font-semibold text-center text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md shadow-sm">View Details</a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="pt-12 px-4 sm:px-6 lg:px-8">
-    <div class="sm:flex sm:items-center">
-      <div class="sm:flex-auto">
-        <h1 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Users</h1>
-        <p class="mt-2 text-gray-700 text-sm dark:text-neutral-400">A list of all your project users.</p>
-      </div>
-      <div class="sm:flex-none mt-4 sm:ml-16 sm:mt-0">
-        <button type="button" class="block px-3 py-2 font-semibold text-center text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">Add User</button>
-      </div>
-    </div>
-    <div class="flow-root mt-8">
-      <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
-        <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
-          <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
-            <table class="min-w-full divide-gray-300 divide-y">
-              <thead class="bg-gray-50 dark:bg-neutral-700/50">
-                <tr>
-                  <th class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm">ID</th>
-                  <th class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">Name</th>
-                  <th class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm">Updated At</th>
-                  <th class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm">Created At</th>
-                  <th class="relative pl-3 pr-4 py-3.5 sm:pr-6"><span class="sr-only">Edit</span></th>
-                </tr>
-              </thead>
-              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y">
-                <tr>
-                  <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap">1</td>
-                  <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap">
-                    <div class="flex items-center">
-                      <div class="flex-shrink-0 h-10 w-10"><img src="https://carefreeagency-eliinova.s3.amazonaws.com/images/avatar/default.svg" alt="" class="h-10 w-10 rounded-full" /></div>
-                      <div class="ml-4">
-                        <div class="flex items-center font-medium text-gray-900 text-sm dark:text-neutral-100">Chris Breuer</div>
-                        <div class="text-gray-500 text-sm dark:text-neutral-400">chris@stacksjs.com</div>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap">2024/01/22 11:00am</td>
-                  <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap">2024/01/02 4:20pm</td>
-                  <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap"><a href="#" class="text-blue-600 hover:text-blue-900">Edit</a></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<script client>
-
-interface ChartLike { destroy: () => void, data: { labels: string[], datasets: Array<{ data: number[] }> }, update: () => void }
-type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
-
-interface ModelNode {
-  id: string
-  name: string
-  description: string
-  properties: string[]
-  relationships: string[]
-  emoji: string
-  color: string
-}
-
-// Model relationship graph — moved out of the former `<script server>` block
-// (stacksjs/stacks#1838). Static for now; can be swapped for an API fetch
-// without changing the page.
-const models: ModelNode[] = [
-  { id: 'user', name: 'User', description: 'Core user model representing application users with authentication and profile information.', properties: ['id', 'name', 'email', 'password'], relationships: ['teams', 'accessTokens', 'activities', 'posts'], emoji: '👤', color: '#2563EB' },
-  { id: 'team', name: 'Team', description: 'Represents a group of users who collaborate together. Teams can have multiple users and users can belong to multiple teams.', properties: ['id', 'name', 'owner_id'], relationships: ['users'], emoji: '👥', color: '#60A5FA' },
-  { id: 'accessToken', name: 'AccessToken', description: 'Manages API authentication tokens for users. Each token grants specific permissions for API access.', properties: ['id', 'token', 'user_id'], relationships: ['user'], emoji: '🔑', color: '#3B82F6' },
-  { id: 'activity', name: 'Activity', description: 'Tracks user actions and events within the application for analytics and audit purposes.', properties: ['id', 'type', 'user_id'], relationships: ['user'], emoji: '📊', color: '#93C5FD' },
-  { id: 'post', name: 'Post', description: 'User-generated content model for sharing updates, articles, or other text-based content.', properties: ['id', 'title', 'content'], relationships: ['user'], emoji: '📝', color: '#BFDBFE' },
-]
-
-const timeRange = state('30')
-const isLoading = state(false)
-const selectedModel = state<ModelNode | null>(null)
-
-function selectModel(model: ModelNode) {
-  selectedModel.set(model)
-}
-
-function resolveModelRoute(id: string) {
-  const routes: Record<string, string> = {
-    user: '/models/users',
-    team: '/models/teams', teams: '/models/teams',
-    accessToken: '/models/access-tokens', accessTokens: '/models/access-tokens',
-    activity: '/models/activities', activities: '/models/activities',
-    post: '/models/posts', posts: '/models/posts',
-  }
-  return routes[id] || '/models'
-}
-
-function formatDateOffset(daysAgo: number) {
-  const date = new Date()
-  date.setDate(date.getDate() - daysAgo)
-  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
-}
-
-function generateGrowthData(days: number, baseCount: number, dailyGrowth: number) {
-  return Array.from({ length: days }, (_, i) => {
-    const dayVariance = Math.random() * dailyGrowth * 0.5
-    const daysFromStart = days - 1 - i
-    return Math.floor(baseCount + (dailyGrowth * daysFromStart) + dayVariance)
-  }).reverse()
-}
-
-function buildSeries() {
-  const days = Number.parseInt(timeRange())
-  const labels = Array.from({ length: days }, (_, i) => formatDateOffset(days - 1 - i)).reverse()
-  return {
-    labels,
-    users: generateGrowthData(days, 2000, 20),
-    sessions: generateGrowthData(days, Math.floor(2000 * 0.4), Math.floor(20 * 0.4)),
-  }
-}
-
-let chartHandle: ChartLike | null = null
-
-function changeTimeRange() {
-  if (!chartHandle)
-    return
-  const series = buildSeries()
-  chartHandle.data.labels = series.labels
-  chartHandle.data.datasets[0].data = series.users
-  chartHandle.data.datasets[1].data = series.sessions
-  chartHandle.update()
-}
-
-onMount(async () => {
-  const { Chart, registerables } = await import('@stacksjs/charts')
-  Chart.register(...registerables)
-  const Ctor = Chart as unknown as ChartCtor
-  const series = buildSeries()
-  chartHandle = useChart({
-    Chart: Ctor,
-    id: 'user_growth_chart',
-    type: 'line',
-    data: {
-      labels: series.labels,
-      datasets: [
-        { label: 'Total Users', data: series.users, borderColor: 'rgb(59, 130, 246)', backgroundColor: 'rgba(59, 130, 246, 0.1)', fill: true, tension: 0.4 },
-        { label: 'Active Sessions', data: series.sessions, borderColor: 'rgb(34, 197, 94)', backgroundColor: 'rgba(34, 197, 94, 0.1)', fill: true, tension: 0.4 },
-      ],
-    },
-    options: {
-      responsive: true,
-      maintainAspectRatio: false,
-      scales: {
-        y: { type: 'linear', beginAtZero: true, grid: { color: 'rgba(200, 200, 200, 0.1)' }, ticks: { color: 'rgb(156, 163, 175)' } },
-        x: { type: 'category', grid: { display: false }, ticks: { color: 'rgb(156, 163, 175)' } },
-      },
-      plugins: { legend: { display: true, position: 'top', align: 'end', labels: { color: 'rgb(156, 163, 175)', boxWidth: 12, padding: 15 } } },
-      interaction: { mode: 'index', intersect: false },
-    },
-  }) as unknown as ChartLike
-})
-
-onDestroy(() => {
-  chartHandle?.destroy()
-  chartHandle = null
-})
-</script>
-
+@title('Dashboard - Users')
+<PageLayout>
+  <DataRecords mode="users" />
+</PageLayout>
 @endsection

package/views/dashboard/dependencies/index.stx

@@ -1,178 +1,10 @@
 @extends('layouts/default')
 
 @section('content')
-<script client>
+@title('Dashboard - Dependencies')
 
-interface Dependency {
-  name: string
-  version: string
-  status: 'installed' | 'pending' | 'outdated' | 'failed'
-  source?: 'pantry' | 'system'
-  description?: string
-}
-
-// Placeholder rows — moved out of the former `<script server>` block
-// (stacksjs/stacks#1838). Wire this up to `pantry list --json` (or
-// whatever the real source of truth is) once the Pantry CLI exposes a
-// listing API. The shape above is what the table renders against — keep
-// it stable so the wiring is a one-line swap of `dependencies = …`.
-const dependencies: Dependency[] = [
-  { name: 'Node.js', version: '22.11.0', status: 'pending', source: 'pantry' },
-  { name: 'Redis', version: '8.0.0', status: 'installed', source: 'pantry' },
-  { name: 'PostgreSQL', version: '18.3', status: 'installed', source: 'pantry' },
-  { name: 'Bun', version: '1.3.14', status: 'installed', source: 'system' },
-]
-
-const totalCount = dependencies.length
-const installedCount = dependencies.filter(d => d.status === 'installed').length
-const pendingCount = dependencies.filter(d => d.status === 'pending').length
-
-function statusVariant(status: string) {
-  if (status === 'installed') return 'success'
-  if (status === 'pending') return 'warning'
-  if (status === 'outdated') return 'info'
-  if (status === 'failed') return 'danger'
-  return 'default'
-}
-</script>
-
-<div class="mx-auto pb-12 pt-6 px-6 space-y-6 max-w-6xl">
-
-  <PageHeader
-    title="Dependencies"
-    description="Discover and manage system dependencies installed via Pantry"
-  />
-
-  <!-- Search row -->
-  <Card variant="default" padding="md">
-    <div class="flex gap-3 items-end">
-      <div class="flex-1 min-w-0">
-        <label class="block mb-1.5 font-medium text-neutral-700 text-sm dark:text-neutral-200">
-          Search the registry
-        </label>
-        <div class="relative">
-          <svg class="absolute left-3 top-1/2 h-4 w-4 text-neutral-400 pointer-events-none -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
-          </svg>
-          <input
-            type="search"
-            name="dependency-search"
-            placeholder="redis, postgresql, openssl…"
-            class="block pl-9 pr-3 py-2 w-full text-neutral-900 text-sm dark:text-white placeholder:text-neutral-400 bg-white dark:bg-white/5 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-500/50 focus:outline-none focus:ring-2 focus:ring-blue-500/40 shadow-sm"
-          />
-        </div>
-      </div>
-      <Button type="submit" variant="primary" size="md">Search</Button>
-    </div>
-    <p class="mt-3 text-neutral-500 text-xs dark:text-neutral-400">
-      Dependencies install through <a href="https://github.com/stacksjs/pantry" target="_blank" rel="noopener" class="font-medium text-blue-600 dark:text-blue-400 hover:underline">Pantry</a> —
-      our package manager and registry. Installed binaries land in <code class="px-1 py-0.5 font-mono text-[11px] bg-black/5 dark:bg-white/10 rounded">pantry/.bin</code>.
-    </p>
-  </Card>
-
-  <!-- Stats -->
-  <div class="grid gap-3 grid-cols-3">
-    <Card variant="default" padding="md">
-      <div class="flex gap-3 items-center">
-        <div class="flex flex-shrink-0 items-center justify-center h-10 w-10 text-blue-600 dark:text-blue-400 bg-blue-500/10 dark:bg-blue-400/15 rounded-lg">
-          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
-          </svg>
-        </div>
-        <div class="min-w-0">
-          <p class="text-[11px] text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Total</p>
-          <p class="font-semibold leading-tight text-2xl text-neutral-900 tracking-tight dark:text-white">{{ totalCount }}</p>
-        </div>
-      </div>
-    </Card>
-    <Card variant="default" padding="md">
-      <div class="flex gap-3 items-center">
-        <div class="flex flex-shrink-0 items-center justify-center h-10 w-10 text-green-600 dark:text-green-400 bg-green-500/10 dark:bg-green-400/15 rounded-lg">
-          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
-          </svg>
-        </div>
-        <div class="min-w-0">
-          <p class="text-[11px] text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Installed</p>
-          <p class="font-semibold leading-tight text-2xl text-neutral-900 tracking-tight dark:text-white">{{ installedCount }}</p>
-        </div>
-      </div>
-    </Card>
-    <Card variant="default" padding="md">
-      <div class="flex gap-3 items-center">
-        <div class="flex flex-shrink-0 items-center justify-center h-10 w-10 text-amber-600 dark:text-amber-400 bg-amber-500/10 dark:bg-amber-400/15 rounded-lg">
-          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-            <circle cx="12" cy="12" r="9"/>
-            <path stroke-linecap="round" stroke-linejoin="round" d="M12 7v5l3 2"/>
-          </svg>
-        </div>
-        <div class="min-w-0">
-          <p class="text-[11px] text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Pending</p>
-          <p class="font-semibold leading-tight text-2xl text-neutral-900 tracking-tight dark:text-white">{{ pendingCount }}</p>
-        </div>
-      </div>
-    </Card>
-  </div>
-
-  <!-- Installed table -->
-  <Card variant="default" padding="none">
-    <div class="flex items-baseline justify-between px-5 py-4 border-b border-neutral-200/60 dark:border-white/5">
-      <div>
-        <h3 class="font-semibold text-base text-neutral-900 dark:text-white">Installed</h3>
-        <p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">
-          {{ totalCount }} {{ totalCount === 1 ? 'dependency' : 'dependencies' }} tracked by Pantry
-        </p>
-      </div>
-    </div>
-
-    @if(dependencies.length === 0)
-      <div class="p-8">
-        <EmptyState
-          title="No dependencies yet"
-          description="Search above to install your first dependency."
-        />
-      </div>
-    @else
-      <div class="overflow-x-auto">
-        <table class="min-w-full divide-neutral-200/60 divide-y dark:divide-white/5">
-          <thead class="bg-neutral-50/60 dark:bg-white/[0.02]">
-            <tr>
-              <th class="px-5 py-2.5 font-medium text-[11px] text-left text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Name</th>
-              <th class="px-5 py-2.5 font-medium text-[11px] text-left text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Version</th>
-              <th class="px-5 py-2.5 font-medium text-[11px] text-left text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Source</th>
-              <th class="px-5 py-2.5 font-medium text-[11px] text-left text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Status</th>
-              <th class="px-5 py-2.5 text-right">
-                <span class="sr-only">Actions</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody class="divide-neutral-200/60 divide-y dark:divide-white/5">
-            <template :for="dep in dependencies">
-              <tr class="hover:bg-neutral-50/70 dark:hover:bg-white/[0.02] transition-colors">
-                <td class="px-5 py-3 font-medium text-neutral-900 text-sm dark:text-white">{{ dep.name }}</td>
-                <td class="px-5 py-3 font-mono tabular-nums text-[13px] text-neutral-500 dark:text-neutral-400">{{ dep.version }}</td>
-                <td class="px-5 py-3 capitalize text-neutral-500 text-sm dark:text-neutral-400">{{ dep.source ?? 'unknown' }}</td>
-                <td class="px-5 py-3">
-                  <Badge :variant="statusVariant(dep.status)" size="sm">{{ dep.status }}</Badge>
-                </td>
-                <td class="px-5 py-3 text-right">
-                  <div class="inline-flex gap-1">
-                    <div :if="dep.status === 'installed'" class="inline-flex gap-1">
-                      <Button variant="secondary" size="sm">Upgrade</Button>
-                      <Button variant="ghost" size="sm">Remove</Button>
-                    </div>
-                    <div :if="dep.status !== 'installed'">
-                      <Button variant="primary" size="sm">Install</Button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </template>
-          </tbody>
-        </table>
-      </div>
-    @endif
-  </Card>
+<div class="p-4 lg:p-8 min-h-[100dvh] dark:bg-neutral-900">
+  <DependenciesDashboard />
 </div>
 
 @endsection