Use Inertia links, paginate projects, drop unused shadcn packages

web/package.json

@@ -21,11 +21,6 @@
     "dependencies": {
         "@inertiajs/vue3": "^2.3.18",
         "@vitejs/plugin-vue": "^6.0.5",
-        "class-variance-authority": "^0.7.1",
-        "clsx": "^2.1.1",
-        "lucide-vue-next": "^1.0.0",
-        "radix-vue": "^1.9.17",
-        "tailwind-merge": "^3.5.0",
         "vue": "^3.5.30"
     }
 }

web/phpunit.xml

@@ -18,14 +18,20 @@
         </include>
     </source>
     <php>
-        <env name="APP_ENV" value="testing"/>
+        <env name="APP_ENV" value="testing" force="true"/>
         <env name="APP_MAINTENANCE_DRIVER" value="file"/>
         <env name="BCRYPT_ROUNDS" value="4"/>
         <env name="BROADCAST_CONNECTION" value="null"/>
         <env name="CACHE_STORE" value="array"/>
-        <env name="DB_CONNECTION" value="sqlite"/>
-        <env name="DB_DATABASE" value=":memory:"/>
-        <env name="DB_URL" value=""/>
+        <env name="DB_CONNECTION" value="sqlite" force="true"/>
+        <env name="DB_DATABASE" value=":memory:" force="true"/>
+        <env name="DB_URL" value="" force="true"/>
+        <!-- Laravel reads $_SERVER before $_ENV: without these, a DB_* variable in the
+             shell (e.g. on a server) would point the tests — and RefreshDatabase — at a real database -->
+        <server name="APP_ENV" value="testing" force="true"/>
+        <server name="DB_CONNECTION" value="sqlite" force="true"/>
+        <server name="DB_DATABASE" value=":memory:" force="true"/>
+        <server name="DB_URL" value="" force="true"/>
         <env name="MAIL_MAILER" value="array"/>
         <env name="QUEUE_CONNECTION" value="sync"/>
         <env name="SESSION_DRIVER" value="array"/>

web/resources/js/Components/Pagination.vue

@@ -0,0 +1,35 @@
+<template>
+  <nav v-if="links.length > 3" class="mt-8 flex flex-wrap items-center justify-center gap-1" aria-label="Pagination">
+    <template v-for="(link, i) in links" :key="i">
+      <Link
+        v-if="link.url"
+        :href="link.url"
+        preserve-scroll
+        :class="[
+          'min-w-9 rounded-md border px-3 py-1.5 text-center text-sm transition-colors',
+          link.active
+            ? 'border-indigo-600 bg-indigo-600 text-white'
+            : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300',
+        ]"
+        :aria-current="link.active ? 'page' : undefined"
+      >
+        {{ label(link.label) }}
+      </Link>
+      <span v-else class="min-w-9 rounded-md px-3 py-1.5 text-center text-sm text-gray-300">
+        {{ label(link.label) }}
+      </span>
+    </template>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import type { PaginationLink } from '@/types';
+
+defineProps<{ links: PaginationLink[] }>();
+
+// Laravel's labels are HTML entities ("&laquo; Previous"); render them as plain text
+function label(raw: string): string {
+  return raw.replace('&laquo;', '«').replace('&raquo;', '»');
+}
+</script>

web/resources/js/Components/SessionCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <a
+  <Link
     :href="`/sessions/${session.id}`"
     class="block rounded-xl border border-gray-200 bg-white p-4 shadow-sm hover:shadow-md hover:border-indigo-300 transition-all group"
   >
@@ -17,10 +17,11 @@
     <div class="mt-3 flex items-center gap-4 text-xs text-gray-400">
       <span>Session {{ session.session_id?.substring(0, 8) }}</span>
     </div>
-  </a>
+  </Link>
 </template>
 
 <script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
 import ToolBadge from './ToolBadge.vue';
 import type { AiSession } from '@/types';
 

web/resources/js/Pages/Dashboard.vue

@@ -7,10 +7,10 @@
           <p class="text-sm text-gray-500">AI session transfer platform</p>
         </div>
         <nav class="flex items-center gap-6 text-sm font-medium">
-          <a href="/projects" class="text-gray-600 hover:text-indigo-600">Projects</a>
-          <a href="/migration/wizard" class="rounded-lg bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-700 transition-colors">
+          <Link href="/projects" class="text-gray-600 hover:text-indigo-600">Projects</Link>
+          <Link href="/migration/wizard" class="rounded-lg bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-700 transition-colors">
             Migration Wizard
-          </a>
+          </Link>
           <span v-if="user" class="text-gray-400" data-testid="current-user">{{ user.name }}</span>
           <Link
             href="/logout"
@@ -51,20 +51,20 @@
         <h2 class="text-lg font-semibold text-gray-700">Quick Actions</h2>
       </div>
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-        <a href="/migration/wizard" class="flex items-center gap-4 rounded-xl border border-gray-200 bg-white p-5 hover:shadow-md transition-all">
+        <Link href="/migration/wizard" class="flex items-center gap-4 rounded-xl border border-gray-200 bg-white p-5 hover:shadow-md transition-all">
           <span class="text-3xl">⚡</span>
           <div>
             <p class="font-semibold">Migration Wizard</p>
             <p class="text-sm text-gray-500">Transfer sessions between AI tools</p>
           </div>
-        </a>
-        <a href="/projects" class="flex items-center gap-4 rounded-xl border border-gray-200 bg-white p-5 hover:shadow-md transition-all">
+        </Link>
+        <Link href="/projects" class="flex items-center gap-4 rounded-xl border border-gray-200 bg-white p-5 hover:shadow-md transition-all">
           <span class="text-3xl">📂</span>
           <div>
             <p class="font-semibold">Browse Projects</p>
             <p class="text-sm text-gray-500">View all projects and sessions</p>
           </div>
-        </a>
+        </Link>
       </div>
     </main>
   </div>

web/resources/js/Pages/Migration/Wizard.vue

@@ -2,7 +2,7 @@
   <div class="min-h-screen bg-gray-50">
     <header class="bg-white border-b border-gray-200 px-6 py-4">
       <div class="max-w-2xl mx-auto flex items-center gap-4">
-        <a href="/" class="text-gray-400 hover:text-gray-600">← Home</a>
+        <Link href="/" class="text-gray-400 hover:text-gray-600">← Home</Link>
         <h1 class="text-xl font-bold text-gray-900">Migration Wizard</h1>
       </div>
     </header>
@@ -185,6 +185,7 @@
 </template>
 
 <script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
 import { computed, ref, reactive } from 'vue';
 import ToolBadge from '@/Components/ToolBadge.vue';
 import type { Project } from '@/types';

web/resources/js/Pages/Projects/Index.vue

@@ -2,7 +2,7 @@
   <div class="min-h-screen bg-gray-50">
     <header class="bg-white border-b border-gray-200 px-6 py-4">
       <div class="max-w-7xl mx-auto flex items-center gap-4">
-        <a href="/" class="text-gray-400 hover:text-gray-600">← Home</a>
+        <Link href="/" class="text-gray-400 hover:text-gray-600">← Home</Link>
         <h1 class="text-xl font-bold text-gray-900">Projects</h1>
       </div>
     </header>
@@ -14,7 +14,7 @@
       </div>
 
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-        <a
+        <Link
           v-for="project in projects.data"
           :key="project.id"
           :href="`/projects/${project.id}`"
@@ -31,20 +31,25 @@
               {{ project.ai_sessions_count }} session(s)
             </span>
           </div>
-        </a>
+        </Link>
       </div>
+
+      <Pagination :links="projects.links" />
     </main>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { Project } from '@/types';
+import { Link } from '@inertiajs/vue3';
+import Pagination from '@/Components/Pagination.vue';
+import type { PaginationLink, Project } from '@/types';
 
 defineProps<{
   projects: {
     data: Project[];
     current_page: number;
     last_page: number;
+    links: PaginationLink[];
   };
 }>();
 </script>

web/resources/js/Pages/Projects/Show.vue

@@ -2,7 +2,7 @@
   <div class="min-h-screen bg-gray-50">
     <header class="bg-white border-b border-gray-200 px-6 py-4">
       <div class="max-w-7xl mx-auto flex items-center gap-4">
-        <a href="/projects" class="text-gray-400 hover:text-gray-600">← Projects</a>
+        <Link href="/projects" class="text-gray-400 hover:text-gray-600">← Projects</Link>
         <h1 class="text-xl font-bold text-gray-900">{{ project.name }}</h1>
       </div>
     </header>
@@ -30,6 +30,7 @@
 </template>
 
 <script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
 import SessionCard from '@/Components/SessionCard.vue';
 import type { AiSession, Project } from '@/types';
 

web/resources/js/Pages/Sessions/Show.vue

@@ -2,11 +2,11 @@
   <div class="min-h-screen bg-gray-50">
     <header class="bg-white border-b border-gray-200 px-6 py-4">
       <div class="max-w-4xl mx-auto flex items-center gap-4">
-        <a
+        <Link
           v-if="session.project"
           :href="`/projects/${session.project_id}`"
           class="text-gray-400 hover:text-gray-600"
-        >← Project</a>
+        >← Project</Link>
         <h1 class="text-xl font-bold text-gray-900">{{ session.title }}</h1>
         <ToolBadge :tool="session.source_tool" />
       </div>
@@ -39,6 +39,7 @@
 </template>
 
 <script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
 import ToolBadge from '@/Components/ToolBadge.vue';
 import TurnBlock from '@/Components/TurnBlock.vue';
 import type { AiSession, SessionDTO } from '@/types';

web/resources/js/types/index.d.ts

@@ -66,3 +66,10 @@ export interface SharedProps {
   auth: { user: AuthUser | null };
   [key: string]: unknown;
 }
+
+/** One entry of a Laravel paginator's `links` array. */
+export interface PaginationLink {
+  url: string | null;
+  label: string;
+  active: boolean;
+}