@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/data/users.stx

@@ -0,0 +1,279 @@
+@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>
+
+@endsection

package/views/dashboard/dependencies/index.stx

@@ -0,0 +1,178 @@
+@extends('layouts/default')
+
+@section('content')
+<script client>
+
+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>
+
+@endsection