From bb14f33326b7da997efaf6157e70c912d4ba0209 Mon Sep 17 00:00:00 2001
From: Carlos Lopez <carlos@kettu.studio>
Date: Thu, 20 Aug 2026 16:05:13 +0200
Subject: [PATCH 01/16] project base repository + domain + schema

---
 src/lib/database/schemas.ts                   | 29 ++++++++
 src/lib/server/domain/domain.ts               | 15 +++++
 src/lib/server/infra/repository.ts            | 12 ++++
 .../projects/application/project.service.ts   | 67 ++++++++-----------
 src/modules/projects/domain/entities.ts       |  5 --
 src/modules/projects/domain/project.domain.ts | 35 ++++++++++
 src/modules/projects/domain/repositories.ts   |  7 --
 .../repositories/project.repostitory.ts       | 53 +++++++++++++++
 .../repositories/sqlite-project.repository.ts | 41 ------------
 9 files changed, 173 insertions(+), 91 deletions(-)
 create mode 100644 src/lib/server/domain/domain.ts
 create mode 100644 src/lib/server/infra/repository.ts
 delete mode 100644 src/modules/projects/domain/entities.ts
 create mode 100644 src/modules/projects/domain/project.domain.ts
 delete mode 100644 src/modules/projects/domain/repositories.ts
 create mode 100644 src/modules/projects/infrastructure/repositories/project.repostitory.ts
 delete mode 100644 src/modules/projects/infrastructure/repositories/sqlite-project.repository.ts

diff --git a/src/lib/database/schemas.ts b/src/lib/database/schemas.ts
index 697122b..f6bde5d 100644
--- a/src/lib/database/schemas.ts
+++ b/src/lib/database/schemas.ts
@@ -44,4 +44,33 @@ relations.for(UserEntity, ({ one, many }) => ({
 
 relations.for(ApiKeyEntity, ({ one }) => ({
   user: one(UserEntity, { fields: ['userId'], references: ['id'] }),
+}));
+
+
+export const ProjectEntity = entity('projects', {
+  id: uuid().primaryKey(),
+  slug: text().notNull(),
+  name: text().notNull(),
+  description: text(),
+  status: text().notNull().default('active'),
+  createdAt: timestamp().notNull().$defaultFn(() => new Date().toISOString()),
+  updatedAt: timestamp().notNull().$defaultFn(() => new Date().toISOString()),
+});
+
+export const ProjectRoleEntity = entity('project_roles', {
+  id: uuid().primaryKey(),
+  projectId: uuid().notNull(),
+  slug: text().notNull(),
+  name: text().notNull(),
+  permissions: json().notNull().$defaultFn(() => []),
+  createdAt: timestamp().notNull().$defaultFn(() => new Date().toISOString()),
+  updatedAt: timestamp().notNull().$defaultFn(() => new Date().toISOString()),
+});
+
+relations.for(ProjectEntity, ({ many }) => ({
+  roles: many(ProjectRoleEntity, { fields: ['id'], references: ['projectId'] }),
+}));
+
+relations.for(ProjectRoleEntity, ({ one }) => ({
+  project: one(ProjectEntity, { fields: ['projectId'], references: ['id'] }),
 }));
\ No newline at end of file
diff --git a/src/lib/server/domain/domain.ts b/src/lib/server/domain/domain.ts
new file mode 100644
index 0000000..f4c2fc6
--- /dev/null
+++ b/src/lib/server/domain/domain.ts
@@ -0,0 +1,15 @@
+
+export class Domain {
+    public id: string = ''
+    public createdAt: Date = new Date()
+    public updatedAt: Date = new Date()
+
+    constructor(data: any) {
+        this.id = data.id
+        this.createdAt = new Date(data.createdAt)
+        this.updatedAt = new Date(data.updatedAt)
+    }
+    toJson() {
+        return JSON.parse(JSON.stringify(this));
+    }
+}
\ No newline at end of file
diff --git a/src/lib/server/infra/repository.ts b/src/lib/server/infra/repository.ts
new file mode 100644
index 0000000..6105e33
--- /dev/null
+++ b/src/lib/server/infra/repository.ts
@@ -0,0 +1,12 @@
+import { getGitDb } from '$lib/server/gitdb';
+export class Repository {
+    protected readonly db = getGitDb();
+
+    protected toDomain(row: any): any {
+        return row;
+    }
+
+    protected toJSON(row: any): any {
+        return row;
+    }
+}
\ No newline at end of file
diff --git a/src/modules/projects/application/project.service.ts b/src/modules/projects/application/project.service.ts
index c07c61e..b0af5d7 100644
--- a/src/modules/projects/application/project.service.ts
+++ b/src/modules/projects/application/project.service.ts
@@ -1,48 +1,39 @@
-import type { Project } from '../domain/entities';
-import type { ProjectRepository } from '../domain/repositories';
 
+import { ProjectRepository } from '../infrastructure/repositories/project.repostitory';
+import { ProjectDomain } from '../domain/project.domain';
 export class ProjectService {
   constructor(private readonly repository: ProjectRepository) {}
 
-  listProjects(): Project[] {
-    return this.repository.list();
+  async listProjects() {
+    const projects = await this.repository.findAll();
+    return projects.map((project) => project.toJson());
   }
 
-  createProject(name: string): Project {
-    const normalizedName = name.trim();
-    if (!normalizedName) {
-      throw new Error('Project name is required');
-    }
 
-    const id = normalizedName.toLowerCase().replace(/[^a-z0-9-]/g, '-');
-    this.repository.upsertIfMissing({ id, name: normalizedName });
 
-    return { id, name: normalizedName };
-  }
+  // syncFromPulumiStateKeys(keys: string[]): number {
+  //   const projects = new Set<string>();
 
-  syncFromPulumiStateKeys(keys: string[]): number {
-    const projects = new Set<string>();
-
-    for (const key of keys) {
-      let id = key;
-      if (id.startsWith('.pulumi/stacks/')) {
-        id = id.replace('.pulumi/stacks/', '');
-      }
-      if (id.endsWith('.json')) {
-        id = id.slice(0, -5);
-      }
-
-      const parts = id.split('/');
-      projects.add(parts.length > 1 ? parts[0] : 'default');
-    }
-
-    this.repository.upsertManyIfMissing(
-      Array.from(projects).map((project) => ({
-        id: project,
-        name: project,
-      })),
-    );
-
-    return projects.size;
-  }
+  //   for (const key of keys) {
+  //     let id = key;
+  //     if (id.startsWith('.pulumi/stacks/')) {
+  //       id = id.replace('.pulumi/stacks/', '');
+  //     }
+  //     if (id.endsWith('.json')) {
+  //       id = id.slice(0, -5);
+  //     }
+
+  //     const parts = id.split('/');
+  //     projects.add(parts.length > 1 ? parts[0] : 'default');
+  //   }
+
+  //   this.repository.upsertManyIfMissing(
+  //     Array.from(projects).map((project) => ({
+  //       id: project,
+  //       name: project,
+  //     })),
+  //   );
+
+  //   return projects.size;
+  // }
 }
diff --git a/src/modules/projects/domain/entities.ts b/src/modules/projects/domain/entities.ts
deleted file mode 100644
index 6514b74..0000000
--- a/src/modules/projects/domain/entities.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface Project {
-  id: string;
-  name: string;
-  createdAt?: string;
-}
diff --git a/src/modules/projects/domain/project.domain.ts b/src/modules/projects/domain/project.domain.ts
new file mode 100644
index 0000000..32f479f
--- /dev/null
+++ b/src/modules/projects/domain/project.domain.ts
@@ -0,0 +1,35 @@
+
+
+import { Domain } from '$lib/server/domain/domain';
+
+export interface ProjectStatus {
+    ACTIVE: 'active';
+    INACTIVE: 'inactive';
+}
+
+export class ProjectDomain extends Domain {
+    public name: string = ''
+    public slug: string | null = null
+    public description?: string | null = null
+    public status: ProjectStatus[keyof ProjectStatus] = 'active'
+    constructor(data: any) {
+        super(data);
+        this.name = data.name
+        this.slug = data.slug
+        this.description = data.description
+        this.status = data.status
+        
+    }
+
+    toJson() {
+        return {
+            id: this.id,
+            name: this.name,
+            slug: this.slug,
+            description: this.description,
+            createdAt: this.createdAt,
+            status: this.status,
+            updatedAt: this.updatedAt
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/modules/projects/domain/repositories.ts b/src/modules/projects/domain/repositories.ts
deleted file mode 100644
index faa1e4b..0000000
--- a/src/modules/projects/domain/repositories.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { Project } from './entities';
-
-export interface ProjectRepository {
-  list(): Project[];
-  upsertIfMissing(project: { id: string; name: string }): void;
-  upsertManyIfMissing(projects: Array<{ id: string; name: string }>): void;
-}
diff --git a/src/modules/projects/infrastructure/repositories/project.repostitory.ts b/src/modules/projects/infrastructure/repositories/project.repostitory.ts
new file mode 100644
index 0000000..833b0ad
--- /dev/null
+++ b/src/modules/projects/infrastructure/repositories/project.repostitory.ts
@@ -0,0 +1,53 @@
+
+import { Repository } from '$lib/server/infra/repository';
+import { ProjectDomain } from '../../domain/project.domain';
+import { ProjectEntity } from '$lib/database/schemas';
+
+export class ProjectRepository extends Repository {
+
+  async findByName(name: string): Promise<ProjectDomain | null> {
+    const role = await this.db.select().from(ProjectEntity).where({ name }).limit(1);
+    return role.rows[0]  ? new ProjectDomain(role.rows[0]) : null;
+  }
+
+  async findAll(): Promise<ProjectDomain[]> {
+    const result = await this.db.select().from(ProjectEntity).orderBy('createdAt', 'asc');
+    return result.rows.map((row: any) => new ProjectDomain(row));
+  }
+
+  async findById(id: string): Promise<ProjectDomain | null> {
+    const result = await this.db.select().from(ProjectEntity).where({ id }).limit(1);
+    const row = result.rows[0];
+    return row ? new ProjectDomain(row) : null;
+  }
+
+  async findBySlug(slug: string): Promise<ProjectDomain | null> {
+    const result = await this.db.select().from(ProjectEntity).where({ slug }).limit(1);
+    const row = result.rows[0];
+    return row ? new ProjectDomain(row) : null;
+  }
+
+  async create(input: { id: string; slug: string; name: string; description?: string, status: string }): Promise<void> {
+    await this.db.insert(ProjectEntity).values({
+      id: input.id,
+      slug: input.slug,
+      name: input.name,
+      description: input.description,
+      status: input.status,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    });
+  }
+
+  async update(id: string, changes: { name?: string; slug?: string; description?: string; status?: string }): Promise<void> {
+    await this.db
+      .update(ProjectEntity)
+      .set({ ...changes, updatedAt: new Date().toISOString() })
+      .where({ id });
+  }
+
+  async deleteById(id: string): Promise<void> {
+    // TODO: Aqui deberemos borrar roles, usuarios y demás entidades relacionadas con el proyecto antes de borrarlo
+    await this.db.delete(ProjectEntity).where({ id });
+  }
+}
\ No newline at end of file
diff --git a/src/modules/projects/infrastructure/repositories/sqlite-project.repository.ts b/src/modules/projects/infrastructure/repositories/sqlite-project.repository.ts
deleted file mode 100644
index 6a6ff83..0000000
--- a/src/modules/projects/infrastructure/repositories/sqlite-project.repository.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { DatabaseClient } from '$lib/database/types';
-import type { Project } from '../../domain/entities';
-import type { ProjectRepository } from '../../domain/repositories';
-
-type ProjectRow = {
-  id: string;
-  name: string;
-  created_at?: string;
-};
-
-export class SqliteProjectRepository implements ProjectRepository {
-  constructor(private readonly db: DatabaseClient) {}
-
-  list(): Project[] {
-    const rows = this.db.all<ProjectRow>('SELECT * FROM projects ORDER BY created_at DESC');
-    return rows.map((row) => ({
-      id: row.id,
-      name: row.name,
-      createdAt: row.created_at,
-    }));
-  }
-
-  upsertIfMissing(project: { id: string; name: string }): void {
-    this.db.run('INSERT INTO projects (id, name) VALUES (@id, @name) ON CONFLICT(id) DO NOTHING', {
-      id: project.id,
-      name: project.name,
-    });
-  }
-
-  upsertManyIfMissing(projects: Array<{ id: string; name: string }>): void {
-    if (!projects.length) {
-      return;
-    }
-
-    this.db.transaction(() => {
-      for (const project of projects) {
-        this.upsertIfMissing(project);
-      }
-    });
-  }
-}

From 4c80adcc3d76527531ffc68ae670c959de38f095 Mon Sep 17 00:00:00 2001
From: Carlos Lopez <carlos@kettu.studio>
Date: Thu, 20 Aug 2026 16:56:32 +0200
Subject: [PATCH 02/16] project WIP

---
 src/lib/components/AppSidebar.svelte          |  96 ++--
 .../projects/application/project.service.ts   | 136 +++++-
 src/modules/projects/index.ts                 |   5 +-
 src/routes/api/projects/+server.ts            |  18 +-
 src/routes/api/projects/[id]/+server.ts       |  58 +++
 src/routes/settings/projects/+page.svelte     | 434 ++++++++++++++++++
 .../settings/projects/[id]/+page.svelte       | 312 +++++++++++++
 7 files changed, 1002 insertions(+), 57 deletions(-)
 create mode 100644 src/routes/api/projects/[id]/+server.ts
 create mode 100644 src/routes/settings/projects/+page.svelte
 create mode 100644 src/routes/settings/projects/[id]/+page.svelte

diff --git a/src/lib/components/AppSidebar.svelte b/src/lib/components/AppSidebar.svelte
index e67296d..80a43d2 100644
--- a/src/lib/components/AppSidebar.svelte
+++ b/src/lib/components/AppSidebar.svelte
@@ -5,6 +5,7 @@
     ChevronDown,
     ChevronRight,
     Database,
+    FolderKanban,
     GitBranch,
     HelpCircle,
     KeyRound,
@@ -15,7 +16,6 @@
     Shield,
     Users,
   } from 'lucide-svelte';
-
   export let pathname = '/';
   export let isConfigured = false;
   export let collapsed = false;
@@ -84,6 +84,11 @@
       href: '/settings/roles-permissions',
       icon: Users,
     },
+    {
+      label: 'Projects',
+      href: '/settings/projects',
+      icon: FolderKanban,
+    },
     {
       label: 'System & Backup',
       href: '/settings/system-backup',
@@ -100,7 +105,10 @@
   let pulumiStateMenuOpen = pathname.startsWith('/pulumi-state');
 
   function getPulumiStateActiveItem() {
-    if (currentPath.startsWith('/pulumi-state/backends') || currentPath.startsWith('/settings/storage')) {
+    if (
+      currentPath.startsWith('/pulumi-state/backends') ||
+      currentPath.startsWith('/settings/storage')
+    ) {
       return '/pulumi-state/backends';
     }
 
@@ -151,7 +159,9 @@
     <div class="flex items-center justify-between gap-3">
       {#if !collapsed}
         <div class="min-w-0">
-          <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">Modules</p>
+          <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
+            Modules
+          </p>
           <h2 class="mt-1 text-sm font-semibold text-slate-900">Navigation</h2>
         </div>
       {/if}
@@ -175,7 +185,9 @@
   {#if !isConfigured}
     <a
       href="/pulumi-state/backends"
-      class="flex items-center gap-3 rounded-md border border-amber-200 bg-amber-50 p-3 text-amber-950 transition-colors hover:border-amber-300 hover:bg-amber-100 {collapsed ? 'justify-center' : 'items-start'}"
+      class="flex items-center gap-3 rounded-md border border-amber-200 bg-amber-50 p-3 text-amber-950 transition-colors hover:border-amber-300 hover:bg-amber-100 {collapsed
+        ? 'justify-center'
+        : 'items-start'}"
       title="Configure a storage backend"
     >
       <div class="flex h-8 w-8 items-center justify-center rounded-md bg-amber-200 text-amber-900">
@@ -194,7 +206,9 @@
       <section>
         {#if !collapsed}
           <div class="mb-2 px-1">
-            <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">{section.title}</p>
+            <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
+              {section.title}
+            </p>
           </div>
         {/if}
 
@@ -210,9 +224,11 @@
                   on:click={() => (pulumiStateMenuOpen = !pulumiStateMenuOpen)}
                   aria-expanded={pulumiStateMenuOpen}
                 >
-                  <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md {isPulumiStateSectionActive()
-                    ? 'bg-white/10 text-white'
-                    : 'bg-slate-100 text-slate-600'}">
+                  <div
+                    class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md {isPulumiStateSectionActive()
+                      ? 'bg-white/10 text-white'
+                      : 'bg-slate-100 text-slate-600'}"
+                  >
                     <GitBranch class="h-3.5 w-3.5" />
                   </div>
                   <p class="min-w-0 flex-1 truncate text-sm font-medium">Pulumi State</p>
@@ -229,7 +245,9 @@
                       {#each pulumiStateItems as pulumiItem}
                         <a
                           href={pulumiItem.href}
-                          class="group flex items-center gap-2 rounded-md px-2.5 py-2 text-sm transition-colors {isActive(pulumiItem.href)
+                          class="group flex items-center gap-2 rounded-md px-2.5 py-2 text-sm transition-colors {isActive(
+                            pulumiItem.href,
+                          )
                             ? 'bg-slate-100 text-slate-900'
                             : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}"
                         >
@@ -244,18 +262,24 @@
             {:else}
               <a
                 href={item.href}
-                class="group flex items-center gap-3 rounded-md border px-3 py-2.5 transition-colors {collapsed ? 'justify-center' : 'items-center'} {(item.href === '/pulumi-state'
-                  ? isPulumiStateSectionActive()
-                  : isActive(item.href))
+                class="group flex items-center gap-3 rounded-md border px-3 py-2.5 transition-colors {collapsed
+                  ? 'justify-center'
+                  : 'items-center'} {(
+                  item.href === '/pulumi-state' ? isPulumiStateSectionActive() : isActive(item.href)
+                )
                   ? 'border-slate-900 bg-slate-900 text-white'
                   : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'}"
                 title={item.label}
               >
-                <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md {(item.href === '/pulumi-state'
-                  ? isPulumiStateSectionActive()
-                  : isActive(item.href))
-                  ? 'bg-white/10 text-white'
-                  : 'bg-slate-100 text-slate-600'}">
+                <div
+                  class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md {(
+                    item.href === '/pulumi-state'
+                      ? isPulumiStateSectionActive()
+                      : isActive(item.href)
+                  )
+                    ? 'bg-white/10 text-white'
+                    : 'bg-slate-100 text-slate-600'}"
+                >
                   <svelte:component this={item.icon} class="h-3.5 w-3.5" />
                 </div>
 
@@ -272,21 +296,29 @@
     <section class="border-t border-slate-200 pt-4">
       {#if !collapsed}
         <div class="mb-2 px-1">
-          <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">Sistema</p>
+          <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
+            Sistema
+          </p>
         </div>
       {/if}
 
       {#if collapsed}
         <a
           href="/settings/authentication"
-          class="group flex items-center justify-center rounded-md border px-3 py-2.5 transition-colors {isActive('/settings')
+          class="group flex items-center justify-center rounded-md border px-3 py-2.5 transition-colors {isActive(
+            '/settings',
+          )
             ? 'border-slate-900 bg-slate-900 text-white'
             : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'}"
           title="Settings"
         >
-          <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md {isActive('/settings')
-            ? 'bg-white/10 text-white'
-            : 'bg-slate-100 text-slate-600'}">
+          <div
+            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md {isActive(
+              '/settings',
+            )
+              ? 'bg-white/10 text-white'
+              : 'bg-slate-100 text-slate-600'}"
+          >
             <Settings class="h-3.5 w-3.5" />
           </div>
         </a>
@@ -294,15 +326,21 @@
         <div class="space-y-2">
           <button
             type="button"
-            class="group flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-left transition-colors {isActive('/settings')
+            class="group flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-left transition-colors {isActive(
+              '/settings',
+            )
               ? 'btn-primary text-white'
               : 'btn-secondary text-slate-700'}"
             on:click={() => (settingsMenuOpen = !settingsMenuOpen)}
             aria-expanded={settingsMenuOpen}
           >
-            <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md {isActive('/settings')
-              ? 'bg-white/10 text-white'
-              : 'bg-slate-100 text-slate-600'}">
+            <div
+              class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md {isActive(
+                '/settings',
+              )
+                ? 'bg-white/10 text-white'
+                : 'bg-slate-100 text-slate-600'}"
+            >
               <Settings class="h-3.5 w-3.5" />
             </div>
             <p class="min-w-0 flex-1 truncate text-sm font-medium">Settings</p>
@@ -319,7 +357,9 @@
                 {#each settingsItems as item}
                   <a
                     href={item.href}
-                    class="group flex items-center gap-2 rounded-md px-2.5 py-2 text-sm transition-colors {isActive(item.href)
+                    class="group flex items-center gap-2 rounded-md px-2.5 py-2 text-sm transition-colors {isActive(
+                      item.href,
+                    )
                       ? 'bg-slate-100 text-slate-900'
                       : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}"
                   >
@@ -334,4 +374,4 @@
       {/if}
     </section>
   </div>
-</aside>
\ No newline at end of file
+</aside>
diff --git a/src/modules/projects/application/project.service.ts b/src/modules/projects/application/project.service.ts
index b0af5d7..b1d62e9 100644
--- a/src/modules/projects/application/project.service.ts
+++ b/src/modules/projects/application/project.service.ts
@@ -1,6 +1,8 @@
-
+import crypto from 'crypto';
 import { ProjectRepository } from '../infrastructure/repositories/project.repostitory';
-import { ProjectDomain } from '../domain/project.domain';
+
+export type ProjectStatusValue = 'active' | 'inactive';
+
 export class ProjectService {
   constructor(private readonly repository: ProjectRepository) {}
 
@@ -9,31 +11,119 @@ export class ProjectService {
     return projects.map((project) => project.toJson());
   }
 
+  async getProject(id: string) {
+    const project = await this.repository.findById(id);
+    if (!project) {
+      throw new Error('Project not found');
+    }
+    return project.toJson();
+  }
+
+  async createProject(input: {
+    name: string;
+    slug?: string;
+    description?: string;
+    status?: string;
+  }) {
+    const name = input.name.trim();
+    if (!name) {
+      throw new Error('Project name is required');
+    }
+
+    const slug = this.normalizeSlug(input.slug || name);
+    if (!slug) {
+      throw new Error('Project slug is required');
+    }
+
+    const existing = await this.repository.findBySlug(slug);
+    if (existing) {
+      throw new Error('A project with this slug already exists');
+    }
+
+    await this.repository.create({
+      id: crypto.randomUUID(),
+      slug,
+      name,
+      description: input.description?.trim() || undefined,
+      status: this.sanitizeStatus(input.status),
+    });
+
+    const created = await this.repository.findBySlug(slug);
+    if (!created) {
+      throw new Error('Failed to create project');
+    }
+
+    return created.toJson();
+  }
+
+  async updateProject(
+    id: string,
+    changes: { name?: string; slug?: string; description?: string; status?: string },
+  ) {
+    const project = await this.repository.findById(id);
+    if (!project) {
+      throw new Error('Project not found');
+    }
 
+    const patch: { name?: string; slug?: string; description?: string; status?: string } = {};
 
-  // syncFromPulumiStateKeys(keys: string[]): number {
-  //   const projects = new Set<string>();
+    if (changes.name !== undefined) {
+      const name = changes.name.trim();
+      if (!name) {
+        throw new Error('Project name is required');
+      }
+      patch.name = name;
+    }
 
-  //   for (const key of keys) {
-  //     let id = key;
-  //     if (id.startsWith('.pulumi/stacks/')) {
-  //       id = id.replace('.pulumi/stacks/', '');
-  //     }
-  //     if (id.endsWith('.json')) {
-  //       id = id.slice(0, -5);
-  //     }
+    if (changes.slug !== undefined) {
+      const slug = this.normalizeSlug(changes.slug);
+      if (!slug) {
+        throw new Error('Project slug is required');
+      }
 
-  //     const parts = id.split('/');
-  //     projects.add(parts.length > 1 ? parts[0] : 'default');
-  //   }
+      const existing = await this.repository.findBySlug(slug);
+      if (existing && existing.id !== id) {
+        throw new Error('A project with this slug already exists');
+      }
+      patch.slug = slug;
+    }
 
-  //   this.repository.upsertManyIfMissing(
-  //     Array.from(projects).map((project) => ({
-  //       id: project,
-  //       name: project,
-  //     })),
-  //   );
+    if (changes.description !== undefined) {
+      patch.description = changes.description.trim();
+    }
 
-  //   return projects.size;
-  // }
+    if (changes.status !== undefined) {
+      patch.status = this.sanitizeStatus(changes.status);
+    }
+
+    await this.repository.update(id, patch);
+
+    const updated = await this.repository.findById(id);
+    if (!updated) {
+      throw new Error('Failed to update project');
+    }
+
+    return updated.toJson();
+  }
+
+  async deleteProject(id: string) {
+    const project = await this.repository.findById(id);
+    if (!project) {
+      throw new Error('Project not found');
+    }
+
+    await this.repository.deleteById(id);
+  }
+
+  private normalizeSlug(value: string): string {
+    return value
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '');
+  }
+
+  private sanitizeStatus(status?: string): ProjectStatusValue {
+    return status === 'inactive' ? 'inactive' : 'active';
+  }
 }
diff --git a/src/modules/projects/index.ts b/src/modules/projects/index.ts
index caa06a1..aab224f 100644
--- a/src/modules/projects/index.ts
+++ b/src/modules/projects/index.ts
@@ -1,7 +1,6 @@
-import { databaseClient } from '$lib/db';
 import { ProjectService } from './application/project.service';
-import { SqliteProjectRepository } from './infrastructure/repositories/sqlite-project.repository';
+import { ProjectRepository } from './infrastructure/repositories/project.repostitory';
 
-const projectRepository = new SqliteProjectRepository(databaseClient);
+const projectRepository = new ProjectRepository();
 
 export const projectService = new ProjectService(projectRepository);
diff --git a/src/routes/api/projects/+server.ts b/src/routes/api/projects/+server.ts
index b98d165..6fb71d1 100644
--- a/src/routes/api/projects/+server.ts
+++ b/src/routes/api/projects/+server.ts
@@ -8,7 +8,7 @@ export async function GET({ locals }) {
   }
 
   try {
-    const projects = projectService.listProjects();
+    const projects = await projectService.listProjects();
     return json({ projects });
   } catch (error: unknown) {
     const message = error instanceof Error ? error.message : 'Unknown error';
@@ -22,8 +22,20 @@ export async function POST({ request, locals }) {
   }
 
   try {
-    const { name } = await request.json();
-    const project = projectService.createProject(String(name || ''));
+    const data = (await request.json()) as {
+      name?: string;
+      slug?: string;
+      description?: string;
+      status?: string;
+    };
+
+    const project = await projectService.createProject({
+      name: String(data.name || ''),
+      slug: data.slug ? String(data.slug) : undefined,
+      description: data.description ? String(data.description) : undefined,
+      status: data.status ? String(data.status) : undefined,
+    });
+
     return json({ success: true, project });
   } catch (error: unknown) {
     const message = error instanceof Error ? error.message : 'Unknown error';
diff --git a/src/routes/api/projects/[id]/+server.ts b/src/routes/api/projects/[id]/+server.ts
new file mode 100644
index 0000000..7db04b0
--- /dev/null
+++ b/src/routes/api/projects/[id]/+server.ts
@@ -0,0 +1,58 @@
+import { json } from '@sveltejs/kit';
+import { projectService } from '../../../../modules/projects';
+import { can } from '../../../../modules/auth';
+
+export async function GET({ params, locals }) {
+  if (!can(locals.user, 'stateiac:read')) {
+    return json({ error: 'Forbidden' }, { status: 403 });
+  }
+
+  try {
+    const project = await projectService.getProject(params.id);
+    return json({ project });
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    return json({ error: message }, { status: 404 });
+  }
+}
+
+export async function PATCH({ request, params, locals }) {
+  if (!can(locals.user, 'stateiac:update')) {
+    return json({ error: 'Forbidden' }, { status: 403 });
+  }
+
+  try {
+    const data = (await request.json()) as {
+      name?: string;
+      slug?: string;
+      description?: string;
+      status?: string;
+    };
+
+    const project = await projectService.updateProject(params.id, {
+      name: data.name,
+      slug: data.slug,
+      description: data.description,
+      status: data.status,
+    });
+
+    return json({ success: true, project });
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    return json({ error: message }, { status: 400 });
+  }
+}
+
+export async function DELETE({ params, locals }) {
+  if (!can(locals.user, 'stateiac:delete')) {
+    return json({ error: 'Forbidden' }, { status: 403 });
+  }
+
+  try {
+    await projectService.deleteProject(params.id);
+    return json({ success: true });
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    return json({ error: message }, { status: 400 });
+  }
+}
diff --git a/src/routes/settings/projects/+page.svelte b/src/routes/settings/projects/+page.svelte
new file mode 100644
index 0000000..a400caa
--- /dev/null
+++ b/src/routes/settings/projects/+page.svelte
@@ -0,0 +1,434 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { CheckCircle, Eye, FolderKanban, Plus, Search, Trash2 } from 'lucide-svelte';
+
+  type ProjectRow = {
+    id: string;
+    name: string;
+    slug: string;
+    description?: string | null;
+    status: 'active' | 'inactive';
+    createdAt: string;
+    updatedAt: string;
+  };
+
+  let projects: ProjectRow[] = [];
+  let loading = false;
+  let error = '';
+  let success = '';
+
+  let searchQuery = '';
+  let statusFilter: 'all' | 'active' | 'inactive' = 'all';
+
+  let createModalOpen = false;
+  let creating = false;
+  let newName = '';
+  let newSlug = '';
+  let newDescription = '';
+  let newStatus: 'active' | 'inactive' = 'active';
+
+  let deleteModalProject: ProjectRow | null = null;
+  let deleteLoading = false;
+
+  onMount(fetchProjects);
+
+  async function fetchProjects() {
+    loading = true;
+    error = '';
+
+    try {
+      const res = await fetch('/api/projects');
+      const payload = await res.json();
+      if (payload.error) throw new Error(payload.error);
+      projects = payload.projects || [];
+    } catch (err: unknown) {
+      error = err instanceof Error ? err.message : 'Failed to load projects.';
+    } finally {
+      loading = false;
+    }
+  }
+
+  function flashSuccess(message: string) {
+    success = message;
+    setTimeout(() => {
+      success = '';
+    }, 2500);
+  }
+
+  $: filteredProjects = projects.filter((project) => {
+    const query = searchQuery.trim().toLowerCase();
+    const matchesQuery =
+      !query ||
+      project.name.toLowerCase().includes(query) ||
+      project.slug.toLowerCase().includes(query) ||
+      (project.description ?? '').toLowerCase().includes(query);
+    const matchesStatus = statusFilter === 'all' || project.status === statusFilter;
+    return matchesQuery && matchesStatus;
+  });
+
+  function openCreateModal() {
+    error = '';
+    newName = '';
+    newSlug = '';
+    newDescription = '';
+    newStatus = 'active';
+    createModalOpen = true;
+  }
+
+  function closeCreateModal() {
+    createModalOpen = false;
+  }
+
+  async function createProject() {
+    error = '';
+
+    if (!newName.trim()) {
+      error = 'Project name is required.';
+      return;
+    }
+
+    creating = true;
+    try {
+      const res = await fetch('/api/projects', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: newName.trim(),
+          slug: newSlug.trim() || undefined,
+          description: newDescription.trim() || undefined,
+          status: newStatus,
+        }),
+      });
+
+      const payload = await res.json();
+      if (payload.error) throw new Error(payload.error);
+
+      closeCreateModal();
+      flashSuccess('Project created.');
+      await fetchProjects();
+    } catch (err: unknown) {
+      error = err instanceof Error ? err.message : 'Failed to create project.';
+    } finally {
+      creating = false;
+    }
+  }
+
+  function openDeleteModal(project: ProjectRow) {
+    deleteModalProject = project;
+    error = '';
+  }
+
+  function closeDeleteModal() {
+    deleteModalProject = null;
+  }
+
+  async function confirmDelete() {
+    if (!deleteModalProject) return;
+
+    error = '';
+    deleteLoading = true;
+
+    try {
+      const res = await fetch(`/api/projects/${deleteModalProject.id}`, { method: 'DELETE' });
+      const payload = await res.json();
+      if (payload.error) throw new Error(payload.error);
+
+      closeDeleteModal();
+      flashSuccess('Project deleted.');
+      await fetchProjects();
+    } catch (err: unknown) {
+      error = err instanceof Error ? err.message : 'Failed to delete project.';
+    } finally {
+      deleteLoading = false;
+    }
+  }
+
+  function formatDate(value: string) {
+    if (!value) return '-';
+    try {
+      return new Date(value).toLocaleDateString();
+    } catch {
+      return value;
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>Projects - Settings</title>
+</svelte:head>
+
+<div class="space-y-6">
+  <section class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+    <div>
+      <h3 class="text-xl font-semibold text-slate-900">Projects</h3>
+      <p class="mt-2 text-sm text-slate-600">
+        Create, organize and manage the projects used across State IaC.
+      </p>
+    </div>
+
+    <button
+      type="button"
+      on:click={openCreateModal}
+      class="btn-primary inline-flex shrink-0 items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium"
+    >
+      <Plus class="h-4 w-4" />
+      New project
+    </button>
+  </section>
+
+  <section class="flex flex-col gap-3 sm:flex-row sm:items-center">
+    <div class="relative flex-1">
+      <Search
+        class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"
+      />
+      <input
+        type="text"
+        bind:value={searchQuery}
+        placeholder="Search by name, slug or description..."
+        class="field-input w-full rounded-md border py-2 pl-9 pr-3 text-sm outline-none transition"
+      />
+    </div>
+
+    <select
+      bind:value={statusFilter}
+      class="field-input w-full rounded-md border px-3 py-2 text-sm outline-none transition sm:w-48"
+    >
+      <option value="all">All statuses</option>
+      <option value="active">Active</option>
+      <option value="inactive">Inactive</option>
+    </select>
+  </section>
+
+  {#if error}
+    <div class="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+      {error}
+    </div>
+  {/if}
+
+  {#if success}
+    <div
+      class="rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-800"
+    >
+      <span class="inline-flex items-center gap-2"><CheckCircle class="h-4 w-4" /> {success}</span>
+    </div>
+  {/if}
+
+  {#if loading}
+    <div class="rounded-md border border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-600">
+      Loading projects...
+    </div>
+  {:else if filteredProjects.length === 0}
+    <div
+      class="rounded-md border border-dashed border-slate-300 bg-slate-50 px-3 py-4 text-sm text-slate-600"
+    >
+      {projects.length === 0 ? 'No projects found.' : 'No projects match your filters.'}
+    </div>
+  {:else}
+    <div class="overflow-hidden rounded-md border border-slate-200 bg-white">
+      <div class="overflow-x-auto">
+        <table class="w-full min-w-160 text-sm">
+          <thead>
+            <tr
+              class="border-b border-slate-200 text-left text-xs font-medium uppercase tracking-wide text-slate-500"
+            >
+              <th class="px-4 py-3">Name</th>
+              <th class="px-4 py-3">Slug</th>
+              <th class="px-4 py-3">Status</th>
+              <th class="px-4 py-3">Created</th>
+              <th class="px-4 py-3 text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each filteredProjects as project (project.id)}
+              <tr class="border-t border-slate-100">
+                <td class="px-4 py-3">
+                  <div class="flex items-center gap-2">
+                    <FolderKanban class="h-4 w-4 shrink-0 text-slate-400" />
+                    <div class="min-w-0">
+                      <p class="truncate font-medium text-slate-900">{project.name}</p>
+                      {#if project.description}
+                        <p class="truncate text-xs text-slate-500">{project.description}</p>
+                      {/if}
+                    </div>
+                  </div>
+                </td>
+                <td class="px-4 py-3 text-slate-600">{project.slug}</td>
+                <td class="px-4 py-3">
+                  <span
+                    class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {project.status ===
+                    'active'
+                      ? 'bg-emerald-50 text-emerald-700'
+                      : 'bg-slate-100 text-slate-600'}"
+                  >
+                    {project.status === 'active' ? 'Active' : 'Inactive'}
+                  </span>
+                </td>
+                <td class="px-4 py-3 text-slate-600">{formatDate(project.createdAt)}</td>
+                <td class="px-4 py-3">
+                  <div class="flex items-center justify-end gap-2">
+                    <a
+                      href={`/settings/projects/${project.id}`}
+                      class="btn-secondary inline-flex items-center gap-1.5 rounded-md px-2.5 py-2 text-xs font-medium"
+                      title="View project"
+                    >
+                      <Eye class="h-3.5 w-3.5" />
+                      View
+                    </a>
+                    <button
+                      type="button"
+                      on:click={() => openDeleteModal(project)}
+                      class="btn-danger inline-flex items-center gap-1.5 rounded-md px-2.5 py-2 text-xs font-medium"
+                      title="Delete project"
+                    >
+                      <Trash2 class="h-3.5 w-3.5" />
+                      Delete
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  {/if}
+</div>
+
+{#if createModalOpen}
+  <button
+    type="button"
+    class="fixed inset-0 z-40 bg-slate-900/50"
+    on:click={closeCreateModal}
+    aria-label="Close create project modal"
+  ></button>
+  <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+    <div
+      class="w-full max-w-lg rounded-md border border-slate-200 bg-white shadow-xl"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Create project modal"
+    >
+      <div class="border-b border-slate-200 px-4 py-3">
+        <h5 class="text-sm font-semibold text-slate-900">New project</h5>
+      </div>
+
+      <div class="space-y-4 px-4 py-4">
+        <div>
+          <label class="block text-sm font-medium text-slate-700" for="new-project-name">Name</label
+          >
+          <input
+            id="new-project-name"
+            type="text"
+            bind:value={newName}
+            class="field-input mt-2 w-full rounded-md border px-3 py-2 text-sm outline-none transition"
+            placeholder="Platform Core"
+          />
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-slate-700" for="new-project-slug">Slug</label
+          >
+          <input
+            id="new-project-slug"
+            type="text"
+            bind:value={newSlug}
+            class="field-input mt-2 w-full rounded-md border px-3 py-2 text-sm outline-none transition"
+            placeholder="platform-core (auto-generated if empty)"
+          />
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-slate-700" for="new-project-description">
+            Description
+          </label>
+          <textarea
+            id="new-project-description"
+            bind:value={newDescription}
+            rows="3"
+            class="field-input mt-2 w-full rounded-md border px-3 py-2 text-sm outline-none transition"
+            placeholder="Optional description"
+          ></textarea>
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-slate-700" for="new-project-status"
+            >Status</label
+          >
+          <select
+            id="new-project-status"
+            bind:value={newStatus}
+            class="field-input mt-2 w-full rounded-md border px-3 py-2 text-sm outline-none transition"
+          >
+            <option value="active">Active</option>
+            <option value="inactive">Inactive</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="flex items-center justify-end gap-2 border-t border-slate-200 px-4 py-3">
+        <button
+          type="button"
+          on:click={closeCreateModal}
+          class="btn-secondary rounded-md px-3 py-2 text-sm font-medium"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          on:click={createProject}
+          disabled={creating}
+          class="btn-primary inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium"
+        >
+          <Plus class="h-4 w-4" />
+          {creating ? 'Creating...' : 'Create project'}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+{#if deleteModalProject}
+  <button
+    type="button"
+    class="fixed inset-0 z-40 bg-slate-900/50"
+    on:click={closeDeleteModal}
+    aria-label="Close delete project modal"
+  ></button>
+  <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+    <div
+      class="w-full max-w-md rounded-md border border-slate-200 bg-white shadow-xl"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Delete project modal"
+    >
+      <div class="border-b border-slate-200 px-4 py-3">
+        <h5 class="text-sm font-semibold text-slate-900">Delete project</h5>
+      </div>
+
+      <div class="px-4 py-4 text-sm text-slate-600">
+        Are you sure you want to delete <span class="font-medium text-slate-900"
+          >{deleteModalProject.name}</span
+        >? This action cannot be undone.
+      </div>
+
+      <div class="flex items-center justify-end gap-2 border-t border-slate-200 px-4 py-3">
+        <button
+          type="button"
+          on:click={closeDeleteModal}
+          class="btn-secondary rounded-md px-3 py-2 text-sm font-medium"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          on:click={confirmDelete}
+          disabled={deleteLoading}
+          class="btn-danger inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium"
+        >
+          <Trash2 class="h-4 w-4" />
+          {deleteLoading ? 'Deleting...' : 'Delete project'}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/src/routes/settings/projects/[id]/+page.svelte b/src/routes/settings/projects/[id]/+page.svelte
new file mode 100644
index 0000000..4230b14
--- /dev/null
+++ b/src/routes/settings/projects/[id]/+page.svelte
@@ -0,0 +1,312 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import { ArrowLeft, CheckCircle, FolderKanban, Save, Trash2 } from 'lucide-svelte';
+
+  type ProjectRow = {
+    id: string;
+    name: string;
+    slug: string;
+    description?: string | null;
+    status: 'active' | 'inactive';
+    createdAt: string;
+    updatedAt: string;
+  };
+
+  let project: ProjectRow | null = null;
+  let loading = false;
+  let saving = false;
+  let error = '';
+  let success = '';
+
+  let editName = '';
+  let editSlug = '';
+  let editDescription = '';
+  let editStatus: 'active' | 'inactive' = 'active';
+
+  let deleteModalOpen = false;
+  let deleteLoading = false;
+
+  $: projectId = $page.params.id;
+
+  onMount(fetchProject);
+
+  async function fetchProject() {
+    loading = true;
+    error = '';
+
+    try {
+      const res = await fetch(`/api/projects/${projectId}`);
+      const payload = await res.json();
+      if (payload.error) throw new Error(payload.error);
+
+      project = payload.project;
+      editName = project?.name ?? '';
+      editSlug = project?.slug ?? '';
+      editDescription = project?.description ?? '';
+      editStatus = project?.status ?? 'active';
+    } catch (err: unknown) {
+      error = err instanceof Error ? err.message : 'Failed to load project.';
+    } finally {
+      loading = false;
+    }
+  }
+
+  function flashSuccess(message: string) {
+    success = message;
+    setTimeout(() => {
+      success = '';
+    }, 2500);
+  }
+
+  async function saveProject() {
+    if (!project) return;
+
+    error = '';
+    if (!editName.trim()) {
+      error = 'Project name is required.';
+      return;
+    }
+
+    saving = true;
+    try {
+      const res = await fetch(`/api/projects/${project.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: editName.trim(),
+          slug: editSlug.trim(),
+          description: editDescription.trim(),
+          status: editStatus,
+        }),
+      });
+
+      const payload = await res.json();
+      if (payload.error) throw new Error(payload.error);
+
+      project = payload.project;
+      flashSuccess('Project updated.');
+    } catch (err: unknown) {
+      error = err instanceof Error ? err.message : 'Failed to update project.';
+    } finally {
+      saving = false;
+    }
+  }
+
+  function openDeleteModal() {
+    error = '';
+    deleteModalOpen = true;
+  }
+
+  function closeDeleteModal() {
+    deleteModalOpen = false;
+  }
+
+  async function confirmDelete() {
+    if (!project) return;
+
+    error = '';
+    deleteLoading = true;
+
+    try {
+      const res = await fetch(`/api/projects/${project.id}`, { method: 'DELETE' });
+      const payload = await res.json();
+      if (payload.error) throw new Error(payload.error);
+
+      await goto('/settings/projects');
+    } catch (err: unknown) {
+      error = err instanceof Error ? err.message : 'Failed to delete project.';
+      deleteLoading = false;
+    }
+  }
+
+  function formatDate(value?: string) {
+    if (!value) return '-';
+    try {
+      return new Date(value).toLocaleString();
+    } catch {
+      return value;
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>Project detail - Settings</title>
+</svelte:head>
+
+<div class="space-y-6">
+  <div>
+    <a
+      href="/settings/projects"
+      class="inline-flex items-center gap-1.5 text-sm text-slate-600 hover:text-slate-900"
+    >
+      <ArrowLeft class="h-4 w-4" />
+      Back to projects
+    </a>
+  </div>
+
+  {#if error}
+    <div class="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+      {error}
+    </div>
+  {/if}
+
+  {#if success}
+    <div
+      class="rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-800"
+    >
+      <span class="inline-flex items-center gap-2"><CheckCircle class="h-4 w-4" /> {success}</span>
+    </div>
+  {/if}
+
+  {#if loading}
+    <div class="rounded-md border border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-600">
+      Loading project...
+    </div>
+  {:else if !project}
+    <div
+      class="rounded-md border border-dashed border-slate-300 bg-slate-50 px-3 py-4 text-sm text-slate-600"
+    >
+      Project not found.
+    </div>
+  {:else}
+    <section class="overflow-hidden rounded-md border border-slate-200 bg-white">
+      <div
+        class="flex flex-col gap-3 border-b border-slate-200 px-4 py-4 sm:flex-row sm:items-center sm:justify-between"
+      >
+        <div class="flex items-center gap-2">
+          <FolderKanban class="h-5 w-5 text-slate-900" />
+          <div>
+            <h3 class="text-lg font-semibold text-slate-900">{project.name}</h3>
+            <p class="text-xs text-slate-500">
+              Created {formatDate(project.createdAt)} · Updated {formatDate(project.updatedAt)}
+            </p>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          on:click={openDeleteModal}
+          class="btn-danger inline-flex items-center gap-1.5 rounded-md px-2.5 py-2 text-xs font-medium"
+        >
+          <Trash2 class="h-3.5 w-3.5" />
+          Delete project
+        </button>
+      </div>
+
+      <div class="space-y-4 px-4 py-4">
+        <div class="grid gap-4 sm:grid-cols-2">
+          <div>
+            <label class="block text-sm font-medium text-slate-700" for="edit-project-name"
+              >Name</label
+            >
+            <input
+              id="edit-project-name"
+              type="text"
+              bind:value={editName}
+              class="field-input mt-2 w-full rounded-md border px-3 py-2 text-sm outline-none transition"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-slate-700" for="edit-project-slug"
+              >Slug</label
+            >
+            <input
+              id="edit-project-slug"
+              type="text"
+              bind:value={editSlug}
+              class="field-input mt-2 w-full rounded-md border px-3 py-2 text-sm outline-none transition"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-slate-700" for="edit-project-description">
+            Description
+          </label>
+          <textarea
+            id="edit-project-description"
+            bind:value={editDescription}
+            rows="4"
+            class="field-input mt-2 w-full rounded-md border px-3 py-2 text-sm outline-none transition"
+            placeholder="Optional description"
+          ></textarea>
+        </div>
+
+        <div class="sm:w-48">
+          <label class="block text-sm font-medium text-slate-700" for="edit-project-status"
+            >Status</label
+          >
+          <select
+            id="edit-project-status"
+            bind:value={editStatus}
+            class="field-input mt-2 w-full rounded-md border px-3 py-2 text-sm outline-none transition"
+          >
+            <option value="active">Active</option>
+            <option value="inactive">Inactive</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="flex items-center justify-end gap-2 border-t border-slate-200 px-4 py-3">
+        <button
+          type="button"
+          on:click={saveProject}
+          disabled={saving}
+          class="btn-primary inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium"
+        >
+          <Save class="h-4 w-4" />
+          {saving ? 'Saving...' : 'Save changes'}
+        </button>
+      </div>
+    </section>
+  {/if}
+</div>
+
+{#if deleteModalOpen && project}
+  <button
+    type="button"
+    class="fixed inset-0 z-40 bg-slate-900/50"
+    on:click={closeDeleteModal}
+    aria-label="Close delete project modal"
+  ></button>
+  <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+    <div
+      class="w-full max-w-md rounded-md border border-slate-200 bg-white shadow-xl"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Delete project modal"
+    >
+      <div class="border-b border-slate-200 px-4 py-3">
+        <h5 class="text-sm font-semibold text-slate-900">Delete project</h5>
+      </div>
+
+      <div class="px-4 py-4 text-sm text-slate-600">
+        Are you sure you want to delete <span class="font-medium text-slate-900"
+          >{project.name}</span
+        >? This action cannot be undone.
+      </div>
+
+      <div class="flex items-center justify-end gap-2 border-t border-slate-200 px-4 py-3">
+        <button
+          type="button"
+          on:click={closeDeleteModal}
+          class="btn-secondary rounded-md px-3 py-2 text-sm font-medium"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          on:click={confirmDelete}
+          disabled={deleteLoading}
+          class="btn-danger inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium"
+        >
+          <Trash2 class="h-4 w-4" />
+          {deleteLoading ? 'Deleting...' : 'Delete project'}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}

From e0548128f7b1718835912db551264dd342ca77d6 Mon Sep 17 00:00:00 2001
From: Carlos Lopez <carlos@kettu.studio>
Date: Thu, 20 Aug 2026 17:00:51 +0200
Subject: [PATCH 03/16] Removed Pulumi state and config!

---
 bun.lock                                      |  55 --------
 package.json                                  |   1 -
 src/lib/database/sqlite.client.ts             |  40 ------
 src/lib/db.ts                                 | 125 ------------------
 .../config/application/config.service.ts      |  22 ---
 .../application/storage-backend.service.ts    |  50 -------
 src/modules/config/domain/entities.ts         |  51 -------
 src/modules/config/domain/repositories.ts     |  13 --
 src/modules/config/index.ts                   |  11 --
 .../repositories/sqlite-config.repository.ts  |  75 -----------
 .../sqlite-storage-backend.repository.ts      |  89 -------------
 src/routes/+layout.server.ts                  |  25 ++--
 src/routes/pulumi-state/+page.server.ts       |  81 ------------
 src/routes/pulumi-state/+page.svelte          |  31 -----
 .../pulumi-state/[...id]/+page.server.ts      |  68 ----------
 src/routes/pulumi-state/[...id]/+page.svelte  |   7 -
 src/routes/pulumi-state/backends/+page.svelte |  25 ----
 .../pulumi-state/cli-guide/+page.svelte       | 122 -----------------
 18 files changed, 13 insertions(+), 878 deletions(-)
 delete mode 100644 src/lib/database/sqlite.client.ts
 delete mode 100644 src/lib/db.ts
 delete mode 100644 src/modules/config/application/config.service.ts
 delete mode 100644 src/modules/config/application/storage-backend.service.ts
 delete mode 100644 src/modules/config/domain/entities.ts
 delete mode 100644 src/modules/config/domain/repositories.ts
 delete mode 100644 src/modules/config/index.ts
 delete mode 100644 src/modules/config/infrastructure/repositories/sqlite-config.repository.ts
 delete mode 100644 src/modules/config/infrastructure/repositories/sqlite-storage-backend.repository.ts
 delete mode 100644 src/routes/pulumi-state/+page.server.ts
 delete mode 100644 src/routes/pulumi-state/+page.svelte
 delete mode 100644 src/routes/pulumi-state/[...id]/+page.server.ts
 delete mode 100644 src/routes/pulumi-state/[...id]/+page.svelte
 delete mode 100644 src/routes/pulumi-state/backends/+page.svelte
 delete mode 100644 src/routes/pulumi-state/cli-guide/+page.svelte

diff --git a/bun.lock b/bun.lock
index 4879342..911687d 100644
--- a/bun.lock
+++ b/bun.lock
@@ -8,7 +8,6 @@
         "@aws-sdk/client-s3": "^3.500.0",
         "@getgitops/gitdb": "^0.2.0",
         "@google-cloud/storage": "^7.21.0",
-        "better-sqlite3": "^12.11.1",
         "lucide-svelte": "^0.320.0",
       },
       "devDependencies": {
@@ -424,22 +423,14 @@
 
     "baseline-browser-mapping": ["baseline-browser-mapping@2.10.43", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-AjYpR78kDWAY3Efj+cDTFH9t9SCoL7OoTp1BOb0mQV7S+6CiLwnWM3FyxhJtdPufDFKzmCSFoUncKjWgJEZTCQ=="],
 
-    "better-sqlite3": ["better-sqlite3@12.11.1", "", { "dependencies": { "bindings": "^1.5.0", "prebuild-install": "^7.1.1" } }, "sha512-dq9AtApgg5PGFtBzPFSBl3HZQjHok5gaQCM6zh2Yk0aSmDCs1CbnVI8/HgASQkNKsWFpseIO9beg5xxpYhbIfA=="],
-
     "bignumber.js": ["bignumber.js@9.3.1", "", {}, "sha512-Ko0uX15oIUS7wJ3Rb30Fs6SkVbLmPBAKdlm7q9+ak9bbIeFf0MwuBsQV6z7+X768/cHsfg+WlysDWJcmthjsjQ=="],
 
-    "bindings": ["bindings@1.5.0", "", { "dependencies": { "file-uri-to-path": "1.0.0" } }, "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ=="],
-
-    "bl": ["bl@4.1.0", "", { "dependencies": { "buffer": "^5.5.0", "inherits": "^2.0.4", "readable-stream": "^3.4.0" } }, "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w=="],
-
     "bowser": ["bowser@2.14.1", "", {}, "sha512-tzPjzCxygAKWFOJP011oxFHs57HzIhOEracIgAePE4pqB3LikALKnSzUyU4MGs9/iCEUuHlAJTjTc5M+u7YEGg=="],
 
     "brace-expansion": ["brace-expansion@1.1.16", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-IDw48K2/2kRkg9LdJxurvq3lV3aBgq0REY89duEqFRthjlPdXHKMj7EnQOXVckxzgisinf3nHfrcE2FufFLXMw=="],
 
     "browserslist": ["browserslist@4.28.6", "", { "dependencies": { "baseline-browser-mapping": "^2.10.42", "caniuse-lite": "^1.0.30001803", "electron-to-chromium": "^1.5.389", "node-releases": "^2.0.51", "update-browserslist-db": "^1.2.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-FQBYNK15VMslhLHpA7+n+n1GOlF1kId2xcCg7/j95f24AOF6VDYMNH4mFxF7KuaTdv627faazpOAjFzMrfJOUw=="],
 
-    "buffer": ["buffer@5.7.1", "", { "dependencies": { "base64-js": "^1.3.1", "ieee754": "^1.1.13" } }, "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ=="],
-
     "buffer-equal-constant-time": ["buffer-equal-constant-time@1.0.1", "", {}, "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="],
 
     "call-bind-apply-helpers": ["call-bind-apply-helpers@1.0.2", "", { "dependencies": { "es-errors": "^1.3.0", "function-bind": "^1.1.2" } }, "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ=="],
@@ -454,8 +445,6 @@
 
     "chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="],
 
-    "chownr": ["chownr@1.1.4", "", {}, "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="],
-
     "code-red": ["code-red@1.0.4", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15", "@types/estree": "^1.0.1", "acorn": "^8.10.0", "estree-walker": "^3.0.3", "periscopic": "^3.1.0" } }, "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw=="],
 
     "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
@@ -478,10 +467,6 @@
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
-    "decompress-response": ["decompress-response@6.0.0", "", { "dependencies": { "mimic-response": "^3.1.0" } }, "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ=="],
-
-    "deep-extend": ["deep-extend@0.6.0", "", {}, "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="],
-
     "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
 
     "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
@@ -548,8 +533,6 @@
 
     "event-target-shim": ["event-target-shim@5.0.1", "", {}, "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="],
 
-    "expand-template": ["expand-template@2.0.3", "", {}, "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg=="],
-
     "expect-type": ["expect-type@1.4.0", "", {}, "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA=="],
 
     "extend": ["extend@3.0.2", "", {}, "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="],
@@ -568,8 +551,6 @@
 
     "file-entry-cache": ["file-entry-cache@8.0.0", "", { "dependencies": { "flat-cache": "^4.0.0" } }, "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ=="],
 
-    "file-uri-to-path": ["file-uri-to-path@1.0.0", "", {}, "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="],
-
     "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
 
     "flat-cache": ["flat-cache@4.0.1", "", { "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.4" } }, "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw=="],
@@ -580,8 +561,6 @@
 
     "fraction.js": ["fraction.js@5.3.4", "", {}, "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ=="],
 
-    "fs-constants": ["fs-constants@1.0.0", "", {}, "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="],
-
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
     "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
@@ -594,8 +573,6 @@
 
     "get-proto": ["get-proto@1.0.1", "", { "dependencies": { "dunder-proto": "^1.0.1", "es-object-atoms": "^1.0.0" } }, "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g=="],
 
-    "github-from-package": ["github-from-package@0.0.0", "", {}, "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw=="],
-
     "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
 
     "globals": ["globals@15.15.0", "", {}, "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg=="],
@@ -628,8 +605,6 @@
 
     "husky": ["husky@9.1.7", "", { "bin": { "husky": "bin.js" } }, "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA=="],
 
-    "ieee754": ["ieee754@1.2.1", "", {}, "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="],
-
     "ignore": ["ignore@7.0.6", "", {}, "sha512-BAg6QkE8W+TuQLrrw0Ugr7HegXduRuuj8/ti2kSOc+jz1dmx8/WNcjr6XGnq5YpDWxFwwaavqD0+jIUOKelTsw=="],
 
     "import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="],
@@ -640,8 +615,6 @@
 
     "inherits": ["inherits@2.0.4", "", {}, "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="],
 
-    "ini": ["ini@1.3.8", "", {}, "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="],
-
     "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
 
     "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
@@ -736,14 +709,8 @@
 
     "mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
 
-    "mimic-response": ["mimic-response@3.1.0", "", {}, "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ=="],
-
     "minimatch": ["minimatch@3.1.5", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w=="],
 
-    "minimist": ["minimist@1.2.8", "", {}, "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="],
-
-    "mkdirp-classic": ["mkdirp-classic@0.5.3", "", {}, "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A=="],
-
     "mri": ["mri@1.2.0", "", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="],
 
     "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
@@ -752,12 +719,8 @@
 
     "nanoid": ["nanoid@3.3.16", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q=="],
 
-    "napi-build-utils": ["napi-build-utils@2.0.0", "", {}, "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA=="],
-
     "natural-compare": ["natural-compare@1.4.0", "", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="],
 
-    "node-abi": ["node-abi@3.94.0", "", { "dependencies": { "semver": "^7.3.5" } }, "sha512-W5ZNO5KRPB5TkYmGVD9F6YqhsglXJzE6etpbmT+f6EQElhiX/UTG551cnsRGvLG3fyZEg9HwaDmNmj5nwJ4z9g=="],
-
     "node-fetch": ["node-fetch@2.7.0", "", { "dependencies": { "whatwg-url": "^5.0.0" }, "peerDependencies": { "encoding": "^0.1.0" }, "optionalPeers": ["encoding"] }, "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A=="],
 
     "node-releases": ["node-releases@2.0.51", "", {}, "sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ=="],
@@ -800,20 +763,14 @@
 
     "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
 
-    "prebuild-install": ["prebuild-install@7.1.3", "", { "dependencies": { "detect-libc": "^2.0.0", "expand-template": "^2.0.3", "github-from-package": "0.0.0", "minimist": "^1.2.3", "mkdirp-classic": "^0.5.3", "napi-build-utils": "^2.0.0", "node-abi": "^3.3.0", "pump": "^3.0.0", "rc": "^1.2.7", "simple-get": "^4.0.0", "tar-fs": "^2.0.0", "tunnel-agent": "^0.6.0" }, "bin": { "prebuild-install": "bin.js" } }, "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug=="],
-
     "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
 
     "prettier": ["prettier@3.9.5", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-/FVl766LpUfB5vXgCYOYa0MeV/441Ia99AeICQIQFTY/Nw0roZwULcXpku5i1/m5kt/baz+s4Zogspd839HSMg=="],
 
     "prettier-plugin-svelte": ["prettier-plugin-svelte@3.5.2", "", { "peerDependencies": { "prettier": "^3.0.0", "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0" } }, "sha512-ItFouLvzSFE3ulNl4DKoWM3BGcbDCNVpIyy/Y3F2gC3aNiGLxtFUdffVqO5Z5hhYG+DFT5KULWaxmeFFpdbvaQ=="],
 
-    "pump": ["pump@3.0.4", "", { "dependencies": { "end-of-stream": "^1.1.0", "once": "^1.3.1" } }, "sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA=="],
-
     "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
 
-    "rc": ["rc@1.2.8", "", { "dependencies": { "deep-extend": "^0.6.0", "ini": "~1.3.0", "minimist": "^1.2.0", "strip-json-comments": "~2.0.1" }, "bin": { "rc": "./cli.js" } }, "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw=="],
-
     "readable-stream": ["readable-stream@3.6.2", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="],
 
     "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
@@ -842,10 +799,6 @@
 
     "siginfo": ["siginfo@2.0.0", "", {}, "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g=="],
 
-    "simple-concat": ["simple-concat@1.0.1", "", {}, "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q=="],
-
-    "simple-get": ["simple-get@4.0.1", "", { "dependencies": { "decompress-response": "^6.0.0", "once": "^1.3.1", "simple-concat": "^1.0.0" } }, "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA=="],
-
     "sirv": ["sirv@3.0.2", "", { "dependencies": { "@polka/url": "^1.0.0-next.24", "mrmime": "^2.0.0", "totalist": "^3.0.0" } }, "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g=="],
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
@@ -880,10 +833,6 @@
 
     "tapable": ["tapable@2.3.3", "", {}, "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A=="],
 
-    "tar-fs": ["tar-fs@2.1.5", "", { "dependencies": { "chownr": "^1.1.1", "mkdirp-classic": "^0.5.2", "pump": "^3.0.0", "tar-stream": "^2.1.4" } }, "sha512-OboTd8mmMhZDNPV+UjQcK9yKAatXu2aJ+r1w4im1Otd4M4fl2hwvdoXUxIYHFTHWK/3y3FarBP70v3vwmGlOxw=="],
-
-    "tar-stream": ["tar-stream@2.2.0", "", { "dependencies": { "bl": "^4.0.3", "end-of-stream": "^1.4.1", "fs-constants": "^1.0.0", "inherits": "^2.0.3", "readable-stream": "^3.1.1" } }, "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ=="],
-
     "teeny-request": ["teeny-request@9.0.0", "", { "dependencies": { "http-proxy-agent": "^5.0.0", "https-proxy-agent": "^5.0.0", "node-fetch": "^2.6.9", "stream-events": "^1.0.5", "uuid": "^9.0.0" } }, "sha512-resvxdc6Mgb7YEThw6G6bExlXKkv6+YbuzGg9xuXxSgxJF7Ozs+o8Y9+2R3sArdWdW8nOokoQb1yrpFB0pQK2g=="],
 
     "tinybench": ["tinybench@2.9.0", "", {}, "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg=="],
@@ -902,8 +851,6 @@
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
-    "tunnel-agent": ["tunnel-agent@0.6.0", "", { "dependencies": { "safe-buffer": "^5.0.1" } }, "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w=="],
-
     "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
 
     "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
@@ -970,8 +917,6 @@
 
     "http-proxy-agent/agent-base": ["agent-base@6.0.2", "", { "dependencies": { "debug": "4" } }, "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ=="],
 
-    "rc/strip-json-comments": ["strip-json-comments@2.0.1", "", {}, "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ=="],
-
     "svelte-eslint-parser/eslint-scope": ["eslint-scope@7.2.2", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg=="],
 
     "svelte-eslint-parser/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
diff --git a/package.json b/package.json
index 9c89225..a7ca65c 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,6 @@
     "@aws-sdk/client-s3": "^3.500.0",
     "@getgitops/gitdb": "^0.2.0",
     "@google-cloud/storage": "^7.21.0",
-    "better-sqlite3": "^12.11.1",
     "lucide-svelte": "^0.320.0"
   }
 }
diff --git a/src/lib/database/sqlite.client.ts b/src/lib/database/sqlite.client.ts
deleted file mode 100644
index 1b7f717..0000000
--- a/src/lib/database/sqlite.client.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import type Database from 'better-sqlite3';
-import type { DatabaseClient, DatabaseParams } from './types';
-
-export class SqliteDatabaseClient implements DatabaseClient {
-  constructor(private readonly sqlite: Database.Database) {}
-
-  exec(sql: string): void {
-    this.sqlite.exec(sql);
-  }
-
-  get<T>(sql: string, params?: DatabaseParams): T | undefined {
-    if (params === undefined) {
-      return this.sqlite.prepare(sql).get() as T | undefined;
-    }
-
-    return this.sqlite.prepare(sql).get(params as never) as T | undefined;
-  }
-
-  all<T>(sql: string, params?: DatabaseParams): T[] {
-    if (params === undefined) {
-      return this.sqlite.prepare(sql).all() as T[];
-    }
-
-    return this.sqlite.prepare(sql).all(params as never) as T[];
-  }
-
-  run(sql: string, params?: DatabaseParams): void {
-    if (params === undefined) {
-      this.sqlite.prepare(sql).run();
-      return;
-    }
-
-    this.sqlite.prepare(sql).run(params as never);
-  }
-
-  transaction<T>(callback: () => T): T {
-    const wrapped = this.sqlite.transaction(callback);
-    return wrapped();
-  }
-}
diff --git a/src/lib/db.ts b/src/lib/db.ts
deleted file mode 100644
index b37a6ae..0000000
--- a/src/lib/db.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import Database from 'better-sqlite3';
-import path from 'path';
-import fs from 'fs';
-import { SqliteDatabaseClient } from './database/sqlite.client';
-
-const DB_DIR = path.resolve(process.cwd(), 'data', 'db');
-const DB_PATH = path.join(DB_DIR, 'states.sqlite');
-
-if (!fs.existsSync(DB_DIR)) {
-  fs.mkdirSync(DB_DIR, { recursive: true });
-}
-
-export const db = new Database(DB_PATH);
-export const databaseClient = new SqliteDatabaseClient(db);
-
-db.pragma('journal_mode = WAL');
-
-db.exec(`
-  CREATE TABLE IF NOT EXISTS users (
-    id TEXT PRIMARY KEY,
-    username TEXT UNIQUE NOT NULL,
-    email TEXT,
-    password_hash TEXT NOT NULL,
-    role TEXT NOT NULL DEFAULT 'developer',
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-  );
-
-  CREATE TABLE IF NOT EXISTS config (
-    id INTEGER PRIMARY KEY CHECK (id = 1),
-    auth_method TEXT NOT NULL DEFAULT 'none',
-    encryption_key TEXT,
-    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
-  );
-
-  CREATE TABLE IF NOT EXISTS projects (
-    id TEXT PRIMARY KEY,
-    name TEXT NOT NULL,
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-  );
-
-  CREATE TABLE IF NOT EXISTS storage_backends (
-    id TEXT PRIMARY KEY,
-    name TEXT NOT NULL,
-    provider TEXT NOT NULL,
-    bucket TEXT NOT NULL,
-    region TEXT,
-    access_key_id TEXT,
-    secret_access_key TEXT,
-    endpoint TEXT,
-    gcp_project_id TEXT,
-    gcp_credentials TEXT,
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-  );
-
-  CREATE TABLE IF NOT EXISTS stacks (
-    id TEXT PRIMARY KEY,
-    project_id TEXT NOT NULL,
-    name TEXT NOT NULL,
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-    FOREIGN KEY (project_id) REFERENCES projects (id) ON DELETE CASCADE
-  );
-
-  CREATE TABLE IF NOT EXISTS states (
-    id TEXT PRIMARY KEY,
-    stack_id TEXT NOT NULL,
-    version INTEGER NOT NULL,
-    checkpoint JSON NOT NULL,
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-    FOREIGN KEY (stack_id) REFERENCES stacks (id) ON DELETE CASCADE
-  );
-
-  CREATE TABLE IF NOT EXISTS history (
-    id TEXT PRIMARY KEY,
-    stack_id TEXT NOT NULL,
-    kind TEXT NOT NULL,
-    start_time INTEGER NOT NULL,
-    end_time INTEGER,
-    message TEXT,
-    environment JSON,
-    config JSON,
-    result TEXT,
-    resource_changes JSON,
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-    FOREIGN KEY (stack_id) REFERENCES stacks (id) ON DELETE CASCADE
-  );
-
-  CREATE TABLE IF NOT EXISTS api_keys (
-    id TEXT PRIMARY KEY,
-    user_id TEXT NOT NULL,
-    name TEXT NOT NULL,
-    key_prefix TEXT NOT NULL,
-    key_hash TEXT NOT NULL,
-    last_used_at DATETIME,
-    revoked_at DATETIME,
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-    FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE
-  );
-`);
-
-try {
-  db.exec('ALTER TABLE config ADD COLUMN encryption_key TEXT');
-} catch {
-  // Ignore if column already exists
-}
-
-const migrations = [
-  'ALTER TABLE users ADD COLUMN email TEXT',
-  'ALTER TABLE config ADD COLUMN public_access INTEGER DEFAULT 1',
-  'ALTER TABLE config ADD COLUMN google_sso_enabled INTEGER DEFAULT 0',
-  'ALTER TABLE config ADD COLUMN google_client_id TEXT',
-  'ALTER TABLE config ADD COLUMN google_client_secret TEXT',
-  'ALTER TABLE config ADD COLUMN saml_enabled INTEGER DEFAULT 0',
-  'ALTER TABLE config ADD COLUMN saml_entry_point TEXT',
-  'ALTER TABLE config ADD COLUMN saml_issuer TEXT',
-  'ALTER TABLE config ADD COLUMN saml_cert TEXT',
-  "ALTER TABLE users ADD COLUMN role TEXT DEFAULT 'developer'",
-];
-
-for (const query of migrations) {
-  try {
-    db.exec(query);
-  } catch {
-    // Ignore if already applied
-  }
-}
diff --git a/src/modules/config/application/config.service.ts b/src/modules/config/application/config.service.ts
deleted file mode 100644
index 39fdac7..0000000
--- a/src/modules/config/application/config.service.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { InstanceConfig } from '../domain/entities';
-import type { ConfigRepository } from '../domain/repositories';
-
-const DEFAULT_CONFIG: InstanceConfig = {
-  publicAccess: false,
-  googleSsoEnabled: false,
-  samlEnabled: false,
-};
-
-export class ConfigService {
-  constructor(private readonly configRepository: ConfigRepository) {}
-
-  getConfig(): InstanceConfig | null {
-    return this.configRepository.getConfig();
-  }
-
-  saveConfig(partial: Partial<InstanceConfig>): void {
-    const existing = this.getConfig() ?? DEFAULT_CONFIG;
-    const merged: InstanceConfig = { ...existing, ...partial };
-    this.configRepository.saveConfig(merged);
-  }
-}
diff --git a/src/modules/config/application/storage-backend.service.ts b/src/modules/config/application/storage-backend.service.ts
deleted file mode 100644
index 70976f6..0000000
--- a/src/modules/config/application/storage-backend.service.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import crypto from 'crypto';
-import type {
-  StorageBackend,
-  StorageBackendPublic,
-  UpsertStorageBackendInput,
-} from '../domain/entities';
-import type { StorageBackendRepository } from '../domain/repositories';
-
-export class StorageBackendService {
-  constructor(private readonly repository: StorageBackendRepository) {}
-
-  list(): StorageBackendPublic[] {
-    return this.repository.list().map((backend) => ({
-      ...backend,
-      secretAccessKey: backend.secretAccessKey ? '***' : null,
-      gcpCredentials: backend.gcpCredentials ? '***' : null,
-    }));
-  }
-
-  getById(id: string): StorageBackend | null {
-    return this.repository.findById(id);
-  }
-
-  upsert(input: UpsertStorageBackendInput): string {
-    const id = input.id || crypto.randomUUID();
-    const existing = input.id ? this.repository.findById(input.id) : null;
-
-    const secretAccessKey =
-      input.secretAccessKey === '***' ? (existing?.secretAccessKey ?? null) : (input.secretAccessKey ?? null);
-    const gcpCredentials =
-      input.gcpCredentials === '***' ? (existing?.gcpCredentials ?? null) : (input.gcpCredentials ?? null);
-
-    return this.repository.upsert({
-      id,
-      name: input.name || 'Unnamed Backend',
-      provider: input.provider,
-      bucket: input.bucket,
-      region: input.region ?? null,
-      accessKeyId: input.accessKeyId ?? null,
-      secretAccessKey,
-      endpoint: input.endpoint ?? null,
-      gcpProjectId: input.gcpProjectId ?? null,
-      gcpCredentials,
-    });
-  }
-
-  deleteById(id: string): void {
-    this.repository.deleteById(id);
-  }
-}
diff --git a/src/modules/config/domain/entities.ts b/src/modules/config/domain/entities.ts
deleted file mode 100644
index 142783b..0000000
--- a/src/modules/config/domain/entities.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-export interface InstanceConfig {
-  publicAccess: boolean;
-  googleSsoEnabled: boolean;
-  googleClientId?: string | null;
-  googleClientSecret?: string | null;
-  samlEnabled: boolean;
-  samlEntryPoint?: string | null;
-  samlIssuer?: string | null;
-  samlCert?: string | null;
-}
-
-export type StorageProvider = 's3' | 'gcs';
-
-export interface StorageBackend {
-  id: string;
-  name: string;
-  provider: StorageProvider;
-  bucket: string;
-  region?: string | null;
-  accessKeyId?: string | null;
-  secretAccessKey?: string | null;
-  endpoint?: string | null;
-  gcpProjectId?: string | null;
-  gcpCredentials?: string | null;
-}
-
-export interface StorageBackendPublic {
-  id: string;
-  name: string;
-  provider: StorageProvider;
-  bucket: string;
-  region?: string | null;
-  accessKeyId?: string | null;
-  secretAccessKey?: string | null;
-  endpoint?: string | null;
-  gcpProjectId?: string | null;
-  gcpCredentials?: string | null;
-}
-
-export interface UpsertStorageBackendInput {
-  id?: string;
-  name?: string;
-  provider: StorageProvider;
-  bucket: string;
-  region?: string | null;
-  accessKeyId?: string | null;
-  secretAccessKey?: string | null;
-  endpoint?: string | null;
-  gcpProjectId?: string | null;
-  gcpCredentials?: string | null;
-}
diff --git a/src/modules/config/domain/repositories.ts b/src/modules/config/domain/repositories.ts
deleted file mode 100644
index 3a849fc..0000000
--- a/src/modules/config/domain/repositories.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { InstanceConfig, StorageBackend } from './entities';
-
-export interface ConfigRepository {
-  getConfig(): InstanceConfig | null;
-  saveConfig(config: InstanceConfig): void;
-}
-
-export interface StorageBackendRepository {
-  list(): StorageBackend[];
-  findById(id: string): StorageBackend | null;
-  upsert(backend: StorageBackend): string;
-  deleteById(id: string): void;
-}
diff --git a/src/modules/config/index.ts b/src/modules/config/index.ts
deleted file mode 100644
index ff4f7fa..0000000
--- a/src/modules/config/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { databaseClient } from '$lib/db';
-import { ConfigService } from './application/config.service';
-import { StorageBackendService } from './application/storage-backend.service';
-import { SqliteConfigRepository } from './infrastructure/repositories/sqlite-config.repository';
-import { SqliteStorageBackendRepository } from './infrastructure/repositories/sqlite-storage-backend.repository';
-
-const configRepository = new SqliteConfigRepository(databaseClient);
-const storageBackendRepository = new SqliteStorageBackendRepository(databaseClient);
-
-export const configService = new ConfigService(configRepository);
-export const storageBackendService = new StorageBackendService(storageBackendRepository);
diff --git a/src/modules/config/infrastructure/repositories/sqlite-config.repository.ts b/src/modules/config/infrastructure/repositories/sqlite-config.repository.ts
deleted file mode 100644
index dad8522..0000000
--- a/src/modules/config/infrastructure/repositories/sqlite-config.repository.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import type { DatabaseClient } from '$lib/database/types';
-import type { InstanceConfig } from '../../domain/entities';
-import type { ConfigRepository } from '../../domain/repositories';
-
-type ConfigRow = {
-  public_access?: number | null;
-  google_sso_enabled?: number | null;
-  google_client_id?: string | null;
-  google_client_secret?: string | null;
-  saml_enabled?: number | null;
-  saml_entry_point?: string | null;
-  saml_issuer?: string | null;
-  saml_cert?: string | null;
-};
-
-export class SqliteConfigRepository implements ConfigRepository {
-  constructor(private readonly db: DatabaseClient) {}
-
-  getConfig(): InstanceConfig | null {
-    const row = this.db.get<ConfigRow>('SELECT * FROM config WHERE id = 1');
-    if (!row) {
-      return null;
-    }
-
-    const publicAccess = row.public_access !== undefined ? row.public_access === 1 : true;
-
-    return {
-      publicAccess,
-      googleSsoEnabled: row.google_sso_enabled === 1,
-      googleClientId: row.google_client_id,
-      googleClientSecret: row.google_client_secret,
-      samlEnabled: row.saml_enabled === 1,
-      samlEntryPoint: row.saml_entry_point,
-      samlIssuer: row.saml_issuer,
-      samlCert: row.saml_cert,
-    };
-  }
-
-  saveConfig(config: InstanceConfig): void {
-    this.db.run(
-      `
-      INSERT INTO config (
-        id, updated_at, public_access, google_sso_enabled,
-        google_client_id, google_client_secret,
-        saml_enabled, saml_entry_point, saml_issuer, saml_cert
-      )
-      VALUES (
-        1, CURRENT_TIMESTAMP, @publicAccess, @googleSsoEnabled,
-        @googleClientId, @googleClientSecret,
-        @samlEnabled, @samlEntryPoint, @samlIssuer, @samlCert
-      )
-      ON CONFLICT(id) DO UPDATE SET
-        public_access = excluded.public_access,
-        google_sso_enabled = excluded.google_sso_enabled,
-        google_client_id = excluded.google_client_id,
-        google_client_secret = excluded.google_client_secret,
-        saml_enabled = excluded.saml_enabled,
-        saml_entry_point = excluded.saml_entry_point,
-        saml_issuer = excluded.saml_issuer,
-        saml_cert = excluded.saml_cert,
-        updated_at = CURRENT_TIMESTAMP
-    `,
-      {
-        publicAccess: config.publicAccess ? 1 : 0,
-        googleSsoEnabled: config.googleSsoEnabled ? 1 : 0,
-        googleClientId: config.googleClientId || null,
-        googleClientSecret: config.googleClientSecret || null,
-        samlEnabled: config.samlEnabled ? 1 : 0,
-        samlEntryPoint: config.samlEntryPoint || null,
-        samlIssuer: config.samlIssuer || null,
-        samlCert: config.samlCert || null,
-      },
-    );
-  }
-}
diff --git a/src/modules/config/infrastructure/repositories/sqlite-storage-backend.repository.ts b/src/modules/config/infrastructure/repositories/sqlite-storage-backend.repository.ts
deleted file mode 100644
index 6a73ae0..0000000
--- a/src/modules/config/infrastructure/repositories/sqlite-storage-backend.repository.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import type { DatabaseClient } from '$lib/database/types';
-import type { StorageBackend, StorageProvider } from '../../domain/entities';
-import type { StorageBackendRepository } from '../../domain/repositories';
-
-type StorageBackendRow = {
-  id: string;
-  name: string;
-  provider: string;
-  bucket: string;
-  region?: string | null;
-  access_key_id?: string | null;
-  secret_access_key?: string | null;
-  endpoint?: string | null;
-  gcp_project_id?: string | null;
-  gcp_credentials?: string | null;
-};
-
-export class SqliteStorageBackendRepository implements StorageBackendRepository {
-  constructor(private readonly db: DatabaseClient) {}
-
-  list(): StorageBackend[] {
-    const rows = this.db.all<StorageBackendRow>('SELECT * FROM storage_backends ORDER BY created_at DESC');
-    return rows.map((row) => this.toEntity(row));
-  }
-
-  findById(id: string): StorageBackend | null {
-    const row = this.db.get<StorageBackendRow>('SELECT * FROM storage_backends WHERE id = ?', [id]);
-    return row ? this.toEntity(row) : null;
-  }
-
-  upsert(backend: StorageBackend): string {
-    this.db.run(
-      `
-      INSERT INTO storage_backends (
-        id, name, provider, bucket, region, access_key_id, secret_access_key, endpoint, gcp_project_id, gcp_credentials
-      ) VALUES (
-        @id, @name, @provider, @bucket, @region, @accessKeyId, @secretAccessKey, @endpoint, @gcpProjectId, @gcpCredentials
-      )
-      ON CONFLICT(id) DO UPDATE SET
-        name = excluded.name,
-        provider = excluded.provider,
-        bucket = excluded.bucket,
-        region = excluded.region,
-        access_key_id = excluded.access_key_id,
-        secret_access_key = excluded.secret_access_key,
-        endpoint = excluded.endpoint,
-        gcp_project_id = excluded.gcp_project_id,
-        gcp_credentials = excluded.gcp_credentials
-    `,
-      {
-        id: backend.id,
-        name: backend.name,
-        provider: backend.provider,
-        bucket: backend.bucket,
-        region: backend.region || null,
-        accessKeyId: backend.accessKeyId || null,
-        secretAccessKey: backend.secretAccessKey || null,
-        endpoint: backend.endpoint || null,
-        gcpProjectId: backend.gcpProjectId || null,
-        gcpCredentials: backend.gcpCredentials || null,
-      },
-    );
-
-    return backend.id;
-  }
-
-  deleteById(id: string): void {
-    this.db.run('DELETE FROM storage_backends WHERE id = ?', [id]);
-  }
-
-  private toEntity(row: StorageBackendRow): StorageBackend {
-    return {
-      id: row.id,
-      name: row.name,
-      provider: this.normalizeProvider(row.provider),
-      bucket: row.bucket,
-      region: row.region,
-      accessKeyId: row.access_key_id,
-      secretAccessKey: row.secret_access_key,
-      endpoint: row.endpoint,
-      gcpProjectId: row.gcp_project_id,
-      gcpCredentials: row.gcp_credentials,
-    };
-  }
-
-  private normalizeProvider(provider: string): StorageProvider {
-    return provider === 'gcs' ? 'gcs' : 's3';
-  }
-}
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index 3ce3a4f..50c23e9 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -1,21 +1,22 @@
-import { configService, storageBackendService } from '../modules/config';
+// import { configService, storageBackendService } from '../modules/config';
 
 export async function load({ cookies, locals }) {
-  const config = configService.getConfig();
-  const backends = storageBackendService.list();
+  // const config = configService.getConfig();
+  // const backends = storageBackendService.list();
 
-  let activeBackendId = cookies.get('active_backend');
-  let activeBackend = backends.find((backend) => backend.id === activeBackendId);
+  // let activeBackendId = cookies.get('active_backend');
+  // let activeBackend = backends.find((backend) => backend.id === activeBackendId);
 
-  if (!activeBackend && backends.length > 0) {
-    activeBackend = backends[0];
-    activeBackendId = activeBackend.id;
-  }
+  // if (!activeBackend && backends.length > 0) {
+  //   activeBackend = backends[0];
+  //   activeBackendId = activeBackend.id;
+  // }
 
   return {
-    isConfigured: !!config && backends.length > 0,
-    backends,
-    activeBackendId,
+    // isConfigured: !!config && backends.length > 0,
+    isConfigured: true,
+    // backends,
+    // activeBackendId,
     user: locals.user,
   };
 }
diff --git a/src/routes/pulumi-state/+page.server.ts b/src/routes/pulumi-state/+page.server.ts
deleted file mode 100644
index 75cd2e0..0000000
--- a/src/routes/pulumi-state/+page.server.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { error } from '@sveltejs/kit';
-import { storageBackendService } from '../../modules/config';
-import { projectService } from '../../modules/projects';
-import { storageService } from '../../modules/storage';
-import { can } from '../../modules/auth';
-
-export async function load({ cookies, locals }) {
-  if (!can(locals.user, 'stateiac:read')) {
-    throw error(403, 'Forbidden');
-  }
-
-  const backends = storageBackendService.list();
-
-  if (!backends.length) {
-    return {
-      hasBackends: false,
-    };
-  }
-
-  const requestedActiveId = cookies.get('active_backend') || backends[0].id;
-  const activeBackend =
-    storageBackendService.getById(requestedActiveId) || storageBackendService.getById(backends[0].id) || backends[0];
-  const config = activeBackend;
-
-  if (!config) {
-    return {
-      hasBackends: false,
-    };
-  }
-
-  const dbProjects = projectService.listProjects();
-
-  try {
-    const { states: files, locks } = await storageService.listPulumiStates(config);
-    const stateSummaries: Record<
-      string,
-      { version?: string; resourceCount: number; error?: boolean }
-    > = {};
-
-    const fetchPromises = files.map(async (fileKey) => {
-      try {
-        const state = await storageService.getPulumiState(config, fileKey);
-        stateSummaries[fileKey] = {
-          version: state.version,
-          resourceCount: state.checkpoint?.latest?.resources?.length || 0,
-        };
-      } catch {
-        stateSummaries[fileKey] = { resourceCount: 0, error: true };
-      }
-    });
-
-    await Promise.allSettled(fetchPromises);
-
-    return {
-      hasBackends: true,
-      files,
-      locks,
-      stateSummaries,
-      dbProjects,
-      backends: backends.map((backend) => ({ id: backend.id, name: backend.name })),
-      activeBackendId: activeBackend.id,
-      bucket: config.bucket,
-      provider: config.provider,
-      region: config.region,
-    };
-  } catch (error: unknown) {
-    return {
-      hasBackends: true,
-      files: [],
-      locks: [],
-      stateSummaries: {},
-      dbProjects,
-      backends: backends.map((backend) => ({ id: backend.id, name: backend.name })),
-      activeBackendId: activeBackend.id,
-      bucket: config.bucket,
-      provider: config.provider,
-      region: config.region,
-      error: error instanceof Error ? error.message : 'Unknown error',
-    };
-  }
-}
\ No newline at end of file
diff --git a/src/routes/pulumi-state/+page.svelte b/src/routes/pulumi-state/+page.svelte
deleted file mode 100644
index 798831c..0000000
--- a/src/routes/pulumi-state/+page.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-  import { Database, ArrowRight } from 'lucide-svelte';
-  import ProjectsPage from '../projects/+page.svelte';
-
-  export let data: any;
-</script>
-
-<svelte:head>
-  <title>Pulumi State - GitVault Suite</title>
-</svelte:head>
-
-{#if !data.hasBackends}
-  <div class="mx-auto max-w-3xl rounded-2xl border border-dashed border-slate-300 bg-white p-8 text-center shadow-sm sm:p-12">
-    <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-slate-100 text-slate-700">
-      <Database class="h-6 w-6" />
-    </div>
-    <h2 class="text-2xl font-semibold text-slate-900">No storage backend configured</h2>
-    <p class="mx-auto mt-3 max-w-xl text-sm leading-6 text-slate-600">
-      Pulumi State needs at least one storage backend to read stacks and checkpoints.
-    </p>
-    <a
-      href="/pulumi-state/backends"
-      class="btn-primary mt-6 inline-flex items-center gap-2 rounded-md px-4 py-2.5 text-sm font-medium"
-    >
-      Configure backends
-      <ArrowRight class="h-4 w-4" />
-    </a>
-  </div>
-{:else}
-  <ProjectsPage {data} />
-{/if}
\ No newline at end of file
diff --git a/src/routes/pulumi-state/[...id]/+page.server.ts b/src/routes/pulumi-state/[...id]/+page.server.ts
deleted file mode 100644
index 3d42177..0000000
--- a/src/routes/pulumi-state/[...id]/+page.server.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { storageBackendService } from '../../../modules/config';
-import { storageService } from '../../../modules/storage';
-import { redirect, error } from '@sveltejs/kit';
-import { can } from '../../../modules/auth';
-import type { PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async ({ params, url, cookies, locals }) => {
-  if (!can(locals.user, 'stateiac:read')) {
-    throw error(403, 'Forbidden');
-  }
-
-  const backends = storageBackendService.list();
-  if (!backends.length) throw redirect(302, '/pulumi-state/backends');
-
-  const activeId = cookies.get('active_backend') || backends[0].id;
-  const config = storageBackendService.getById(activeId) || storageBackendService.getById(backends[0].id);
-
-  if (!config) throw redirect(302, '/pulumi-state/backends');
-
-  const cleanId = params.id;
-  const checkpointKey = url.searchParams.get('checkpoint');
-
-  let state = null;
-  let finalKey = '';
-  let history: Array<Record<string, unknown>> = [];
-
-  if (checkpointKey) {
-    try {
-      state = await storageService.getPulumiState(config, checkpointKey);
-      finalKey = checkpointKey;
-    } catch (error: unknown) {
-      console.error('Failed to load checkpoint state', error);
-    }
-  } else {
-    const tryKeys = [`.pulumi/stacks/${cleanId}.json`, `${cleanId}.json`, cleanId];
-
-    for (const key of tryKeys) {
-      try {
-        state = await storageService.getPulumiState(config, key);
-        finalKey = key;
-        break;
-      } catch (error: unknown) {
-        console.error('Failed to load stack state', error);
-      }
-    }
-  }
-
-  if (!state) {
-    return {
-      error: `Stack not found for ID '${cleanId}'.`,
-      cleanId,
-    };
-  }
-
-  try {
-    history = await storageService.listPulumiHistory(config, cleanId);
-  } catch (error) {
-    console.error('Failed to load history', error);
-  }
-
-  return {
-    state,
-    key: finalKey,
-    cleanId,
-    history,
-    isHistorical: !!checkpointKey,
-  };
-};
diff --git a/src/routes/pulumi-state/[...id]/+page.svelte b/src/routes/pulumi-state/[...id]/+page.svelte
deleted file mode 100644
index 2ee2890..0000000
--- a/src/routes/pulumi-state/[...id]/+page.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts">
-  import StackDetailPage from '../../projects/[...id]/+page.svelte';
-
-  export let data: any;
-</script>
-
-<StackDetailPage {data} />
\ No newline at end of file
diff --git a/src/routes/pulumi-state/backends/+page.svelte b/src/routes/pulumi-state/backends/+page.svelte
deleted file mode 100644
index a80b4fa..0000000
--- a/src/routes/pulumi-state/backends/+page.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-  import SubNavbar from '$lib/components/SubNavbar.svelte';
-  import StorageSettingsPage from '../../settings/storage/+page.svelte';
-
-  export let data: any;
-
-  function selectBackend(event: CustomEvent<{ id: string }>) {
-    document.cookie = `active_backend=${event.detail.id}; path=/; max-age=31536000`;
-    window.location.href = '/pulumi-state';
-  }
-</script>
-
-<svelte:head>
-  <title>Storage Backends - Pulumi State</title>
-</svelte:head>
-
-<SubNavbar
-  label="State"
-  options={data.backends || []}
-  activeId={data.activeBackendId || ''}
-  path="/backends"
-  on:change={selectBackend}
-/>
-
-<StorageSettingsPage />
\ No newline at end of file
diff --git a/src/routes/pulumi-state/cli-guide/+page.svelte b/src/routes/pulumi-state/cli-guide/+page.svelte
deleted file mode 100644
index 18df412..0000000
--- a/src/routes/pulumi-state/cli-guide/+page.svelte
+++ /dev/null
@@ -1,122 +0,0 @@
-<script lang="ts">
-  import { Terminal, BookOpen, AlertTriangle, Cloud, Layers } from 'lucide-svelte';
-  import SubNavbar from '$lib/components/SubNavbar.svelte';
-
-  export let data: any;
-
-  function selectBackend(event: CustomEvent<{ id: string }>) {
-    document.cookie = `active_backend=${event.detail.id}; path=/; max-age=31536000`;
-    window.location.href = '/pulumi-state';
-  }
-</script>
-
-<svelte:head>
-  <title>CLI Guide - Pulumi State</title>
-</svelte:head>
-
-<SubNavbar
-  label="State"
-  options={data.backends || []}
-  activeId={data.activeBackendId || ''}
-  path="/cli-guide"
-  on:change={selectBackend}
-/>
-
-<div class="max-w-5xl space-y-6">
-  <section class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
-    <div class="flex items-center gap-3">
-      <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-100 text-slate-700">
-        <BookOpen class="h-5 w-5" />
-      </div>
-      <div>
-        <h2 class="text-2xl font-bold text-slate-900">Pulumi CLI Guide</h2>
-        <p class="mt-1 text-sm text-slate-600">
-          Basic workflow from login to create/select/remove/destroy stacks.
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
-    <h3 class="mb-3 flex items-center gap-2 text-lg font-semibold text-slate-900">
-      <Cloud class="h-5 w-5 text-blue-600" />
-      1) Login to your backend
-    </h3>
-    <p class="mb-3 text-sm text-slate-600">
-      Use the backend URL that matches your selected storage provider.
-    </p>
-    <div class="grid gap-4 md:grid-cols-2">
-      <div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
-        <p class="mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">S3</p>
-        <pre class="overflow-x-auto text-sm text-slate-800"><code>pulumi login s3://&lt;bucket&gt;?region=&lt;region&gt;</code></pre>
-      </div>
-      <div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
-        <p class="mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">GCS</p>
-        <pre class="overflow-x-auto text-sm text-slate-800"><code>pulumi login gs://&lt;bucket&gt;</code></pre>
-      </div>
-    </div>
-  </section>
-
-  <section class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
-    <h3 class="mb-3 flex items-center gap-2 text-lg font-semibold text-slate-900">
-      <Layers class="h-5 w-5 text-emerald-600" />
-      2) Create a Pulumi project and stack
-    </h3>
-    <div class="space-y-3 rounded-xl border border-slate-200 bg-slate-50 p-4">
-      <pre class="overflow-x-auto text-sm text-slate-800"><code>pulumi new typescript --name my-project
-pulumi stack init dev
-pulumi stack select dev</code></pre>
-    </div>
-    <p class="mt-3 text-sm text-slate-600">
-      If your stack naming convention includes project prefixes, use format like
-      <span class="font-mono text-slate-800">my-project/dev</span>.
-    </p>
-  </section>
-
-  <section class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
-    <h3 class="mb-3 flex items-center gap-2 text-lg font-semibold text-slate-900">
-      <Terminal class="h-5 w-5 text-violet-600" />
-      3) Day-to-day stack commands
-    </h3>
-    <div class="grid gap-4 md:grid-cols-2">
-      <div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
-        <p class="mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Select Stack</p>
-        <pre class="overflow-x-auto text-sm text-slate-800"><code>pulumi stack select my-project/dev</code></pre>
-      </div>
-      <div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
-        <p class="mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Preview</p>
-        <pre class="overflow-x-auto text-sm text-slate-800"><code>pulumi preview</code></pre>
-      </div>
-      <div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
-        <p class="mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Deploy</p>
-        <pre class="overflow-x-auto text-sm text-slate-800"><code>pulumi up</code></pre>
-      </div>
-      <div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
-        <p class="mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Check Outputs</p>
-        <pre class="overflow-x-auto text-sm text-slate-800"><code>pulumi stack output
-pulumi stack output --json</code></pre>
-      </div>
-    </div>
-  </section>
-
-  <section class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
-    <h3 class="mb-3 flex items-center gap-2 text-lg font-semibold text-slate-900">
-      <AlertTriangle class="h-5 w-5 text-rose-600" />
-      4) Remove resources and delete stacks
-    </h3>
-    <div class="space-y-3 rounded-xl border border-rose-200 bg-rose-50 p-4">
-      <pre class="overflow-x-auto text-sm text-rose-900"><code># Destroy infrastructure in selected stack
-pulumi destroy
-
-# Remove stack from backend (after destroy)
-pulumi stack rm my-project/dev
-
-# Force remove if needed
-pulumi stack rm my-project/dev --force</code></pre>
-    </div>
-    <p class="mt-3 text-sm text-slate-600">
-      Recommended order: <span class="font-mono text-slate-800">destroy</span> first, then
-      <span class="font-mono text-slate-800">stack rm</span>.
-    </p>
-  </section>
-</div>

From 8dbf3645476582243139155d4e0a08b342909c26 Mon Sep 17 00:00:00 2001
From: Carlos Lopez <carlos@kettu.studio>
Date: Thu, 20 Aug 2026 17:02:28 +0200
Subject: [PATCH 04/16] fixes

---
 src/routes/api/config/+server.ts | 38 --------------------------------
 1 file changed, 38 deletions(-)
 delete mode 100644 src/routes/api/config/+server.ts

diff --git a/src/routes/api/config/+server.ts b/src/routes/api/config/+server.ts
deleted file mode 100644
index 23d8528..0000000
--- a/src/routes/api/config/+server.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { json } from '@sveltejs/kit';
-import { configService } from '../../../modules/config';
-import type { InstanceConfig } from '../../../modules/config/domain/entities';
-
-export async function GET() {
-  const config = configService.getConfig();
-
-  if (!config) {
-    return json({ configured: false });
-  }
-
-  const safeConfig = { ...config };
-  if (safeConfig.googleClientSecret) safeConfig.googleClientSecret = '***';
-  if (safeConfig.samlCert) safeConfig.samlCert = '***';
-
-  return json({ configured: true, config: safeConfig });
-}
-
-export async function POST({ request }) {
-  try {
-    const newConfig = (await request.json()) as Partial<InstanceConfig>;
-    const existing = configService.getConfig();
-
-    if (newConfig.googleClientSecret === '***') {
-      newConfig.googleClientSecret = existing?.googleClientSecret || null;
-    }
-
-    if (newConfig.samlCert === '***') {
-      newConfig.samlCert = existing?.samlCert || null;
-    }
-
-    configService.saveConfig(newConfig);
-    return json({ success: true });
-  } catch (error: unknown) {
-    const message = error instanceof Error ? error.message : 'Failed to save config';
-    return json({ error: message }, { status: 500 });
-  }
-}
\ No newline at end of file

From d329008c5ad1cef6d8113bb79d872420523f1048 Mon Sep 17 00:00:00 2001
From: Carlos Lopez <carlos@kettu.studio>
Date: Thu, 20 Aug 2026 17:04:34 +0200
Subject: [PATCH 05/16] fix config unused

---
 src/routes/profile/+page.server.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/routes/profile/+page.server.ts b/src/routes/profile/+page.server.ts
index d26db62..8719a70 100644
--- a/src/routes/profile/+page.server.ts
+++ b/src/routes/profile/+page.server.ts
@@ -1,6 +1,5 @@
 import { fail, redirect } from '@sveltejs/kit';
 import { apiKeysService, profileService } from '../../modules/auth';
-import { storageBackendService } from '../../modules/config';
 
 function expiresAtFromDays(expiresInDays: string | null): string | null {
   if (!expiresInDays) {
@@ -28,10 +27,6 @@ export async function load({ locals, cookies }) {
     throw redirect(302, '/login');
   }
 
-  const backends = storageBackendService.list();
-  const activeBackendId = cookies.get('active_backend') || backends[0]?.id || null;
-  const activeBackend = backends.find((backend) => backend.id === activeBackendId) || null;
-  const gcpConnected = activeBackend?.provider === 'gcs';
 
   const apiKeys = await apiKeysService.listActiveApiKeys(user.id);
 
@@ -42,7 +37,7 @@ export async function load({ locals, cookies }) {
       email: user.email,
       role: user.role,
     },
-    gcpConnected,
+    gcpConnected: false,
     apiKeys,
   };
 }

From c5f41c43684e50a1843536ef883cbe2e55e93be6 Mon Sep 17 00:00:00 2001
From: Carlos Lopez <carlos@kettu.studio>
Date: Thu, 20 Aug 2026 17:49:52 +0200
Subject: [PATCH 06/16] project

---
 src/lib/components/AppSidebar.svelte          |  25 +-
 .../projects/application/project.service.ts   |   8 +
 src/routes/+page.server.ts                    |  10 +-
 src/routes/overview/+page.server.ts           |  14 +
 src/routes/overview/+page.svelte              |  91 ++++
 .../{projects => project}/+page.server.ts     |   2 +-
 src/routes/project/[slug]/+layout.server.ts   |  16 +
 src/routes/project/[slug]/+layout.svelte      |  68 +++
 .../[id] => project/[slug]}/+page.svelte      | 223 ++++-----
 src/routes/project/[slug]/audit/+page.svelte  |  26 +
 .../project/[slug]/overview/+page.svelte      |  73 +++
 .../[slug]/roles-permissions/+page.svelte     |  24 +
 .../project/[slug]/users-groups/+page.svelte  |  26 +
 src/routes/projects/+page.svelte              | 372 --------------
 src/routes/projects/[...id]/+page.server.ts   |   6 -
 src/routes/projects/[...id]/+page.svelte      | 457 ------------------
 src/routes/settings/projects/+page.svelte     |   6 +-
 17 files changed, 454 insertions(+), 993 deletions(-)
 create mode 100644 src/routes/overview/+page.server.ts
 create mode 100644 src/routes/overview/+page.svelte
 rename src/routes/{projects => project}/+page.server.ts (60%)
 create mode 100644 src/routes/project/[slug]/+layout.server.ts
 create mode 100644 src/routes/project/[slug]/+layout.svelte
 rename src/routes/{settings/projects/[id] => project/[slug]}/+page.svelte (50%)
 create mode 100644 src/routes/project/[slug]/audit/+page.svelte
 create mode 100644 src/routes/project/[slug]/overview/+page.svelte
 create mode 100644 src/routes/project/[slug]/roles-permissions/+page.svelte
 create mode 100644 src/routes/project/[slug]/users-groups/+page.svelte
 delete mode 100644 src/routes/projects/+page.svelte
 delete mode 100644 src/routes/projects/[...id]/+page.server.ts
 delete mode 100644 src/routes/projects/[...id]/+page.svelte

diff --git a/src/lib/components/AppSidebar.svelte b/src/lib/components/AppSidebar.svelte
index 80a43d2..027f9fa 100644
--- a/src/lib/components/AppSidebar.svelte
+++ b/src/lib/components/AppSidebar.svelte
@@ -9,6 +9,7 @@
     GitBranch,
     HelpCircle,
     KeyRound,
+    LayoutDashboard,
     Lock,
     PanelLeftClose,
     PanelLeftOpen,
@@ -23,6 +24,16 @@
   let currentPath = pathname;
 
   const sections = [
+    {
+      title: 'Inicio',
+      items: [
+        {
+          label: 'Overview',
+          href: '/overview',
+          icon: LayoutDashboard,
+        },
+      ],
+    },
     {
       title: 'Seguridad',
       items: [
@@ -74,6 +85,11 @@
   ];
 
   const settingsItems = [
+    {
+      label: 'Projects',
+      href: '/settings/projects',
+      icon: FolderKanban,
+    },
     {
       label: 'Autentication',
       href: '/settings/authentication',
@@ -84,11 +100,6 @@
       href: '/settings/roles-permissions',
       icon: Users,
     },
-    {
-      label: 'Projects',
-      href: '/settings/projects',
-      icon: FolderKanban,
-    },
     {
       label: 'System & Backup',
       href: '/settings/system-backup',
@@ -116,7 +127,7 @@
       return '/pulumi-state/cli-guide';
     }
 
-    if (currentPath.startsWith('/pulumi-state') || currentPath.startsWith('/projects')) {
+    if (currentPath.startsWith('/pulumi-state')) {
       return '/pulumi-state';
     }
 
@@ -149,7 +160,7 @@
     settingsMenuOpen = true;
   }
 
-  $: if (currentPath.startsWith('/pulumi-state') || currentPath.startsWith('/projects')) {
+  $: if (currentPath.startsWith('/pulumi-state')) {
     pulumiStateMenuOpen = true;
   }
 </script>
diff --git a/src/modules/projects/application/project.service.ts b/src/modules/projects/application/project.service.ts
index b1d62e9..43c7d41 100644
--- a/src/modules/projects/application/project.service.ts
+++ b/src/modules/projects/application/project.service.ts
@@ -19,6 +19,14 @@ export class ProjectService {
     return project.toJson();
   }
 
+  async getProjectBySlug(slug: string) {
+    const project = await this.repository.findBySlug(slug);
+    if (!project) {
+      throw new Error('Project not found');
+    }
+    return project.toJson();
+  }
+
   async createProject(input: {
     name: string;
     slug?: string;
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 9e07b6d..957b07d 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -1,11 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
-export async function load({ parent }) {
-  const { isConfigured } = await parent();
-
-  if (isConfigured) {
-    throw redirect(302, '/pulumi-state');
-  }
-
-  throw redirect(302, '/settings');
+export function load() {
+  throw redirect(302, '/overview');
 }
diff --git a/src/routes/overview/+page.server.ts b/src/routes/overview/+page.server.ts
new file mode 100644
index 0000000..cea2664
--- /dev/null
+++ b/src/routes/overview/+page.server.ts
@@ -0,0 +1,14 @@
+import { error } from '@sveltejs/kit';
+import { projectService } from '../../modules/projects';
+import { can } from '../../modules/auth';
+
+export async function load({ locals }) {
+  if (!can(locals.user, 'stateiac:read')) {
+    throw error(403, 'Forbidden');
+  }
+
+  const projects = await projectService.listProjects();
+  const activeProjects = projects.filter((project) => project.status === 'active');
+
+  return { projects: activeProjects };
+}
diff --git a/src/routes/overview/+page.svelte b/src/routes/overview/+page.svelte
new file mode 100644
index 0000000..b24b748
--- /dev/null
+++ b/src/routes/overview/+page.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { ArrowRight, FolderKanban, Search } from 'lucide-svelte';
+
+  type ProjectRow = {
+    id: string;
+    name: string;
+    slug: string;
+    description?: string | null;
+    status: 'active' | 'inactive';
+    createdAt: string;
+    updatedAt: string;
+  };
+
+  export let data: { projects: ProjectRow[] };
+
+  let searchQuery = '';
+
+  $: filteredProjects = data.projects.filter((project) => {
+    const query = searchQuery.trim().toLowerCase();
+    if (!query) return true;
+
+    return (
+      project.name.toLowerCase().includes(query) ||
+      project.slug.toLowerCase().includes(query) ||
+      (project.description ?? '').toLowerCase().includes(query)
+    );
+  });
+</script>
+
+<svelte:head>
+  <title>Overview - GitVault Suite</title>
+</svelte:head>
+
+<div class="mx-auto w-full max-w-7xl space-y-6">
+  <section>
+    <h2 class="text-2xl font-semibold text-slate-900">Overview</h2>
+    <p class="mt-2 text-sm text-slate-600">Selecciona un proyecto activo para ver su detalle.</p>
+  </section>
+
+  <section class="relative max-w-md">
+    <Search
+      class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"
+    />
+    <input
+      type="text"
+      bind:value={searchQuery}
+      placeholder="Buscar proyectos..."
+      class="field-input w-full rounded-md border py-2 pl-9 pr-3 text-sm outline-none transition"
+    />
+  </section>
+
+  {#if filteredProjects.length === 0}
+    <div
+      class="rounded-md border border-dashed border-slate-300 bg-slate-50 px-6 py-16 text-center text-sm text-slate-600"
+    >
+      {data.projects.length === 0
+        ? 'No hay proyectos activos.'
+        : 'Ningún proyecto coincide con la búsqueda.'}
+    </div>
+  {:else}
+    <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {#each filteredProjects as project (project.id)}
+        <a
+          href={`/project/${project.slug}/overview`}
+          class="group flex flex-col justify-between rounded-md border border-slate-200 bg-white p-5 shadow-sm transition-colors hover:border-slate-300 hover:shadow-md"
+        >
+          <div>
+            <div class="flex items-center gap-2">
+              <FolderKanban class="h-5 w-5 shrink-0 text-slate-400" />
+              <h3 class="truncate text-base font-semibold text-slate-900">{project.name}</h3>
+            </div>
+            {#if project.description}
+              <p class="mt-2 line-clamp-2 text-sm text-slate-600">{project.description}</p>
+            {/if}
+          </div>
+
+          <div class="mt-4 flex items-center justify-between">
+            <span
+              class="inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-700"
+            >
+              Active
+            </span>
+            <ArrowRight
+              class="h-4 w-4 text-slate-400 transition-transform group-hover:translate-x-1 group-hover:text-slate-900"
+            />
+          </div>
+        </a>
+      {/each}
+    </section>
+  {/if}
+</div>
diff --git a/src/routes/projects/+page.server.ts b/src/routes/project/+page.server.ts
similarity index 60%
rename from src/routes/projects/+page.server.ts
rename to src/routes/project/+page.server.ts
index 29dfdcd..3ff99af 100644
--- a/src/routes/projects/+page.server.ts
+++ b/src/routes/project/+page.server.ts
@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export function load() {
-  throw redirect(302, '/pulumi-state');
+  throw redirect(302, '/settings/projects');
 }
diff --git a/src/routes/project/[slug]/+layout.server.ts b/src/routes/project/[slug]/+layout.server.ts
new file mode 100644
index 0000000..bd8e1c9
--- /dev/null
+++ b/src/routes/project/[slug]/+layout.server.ts
@@ -0,0 +1,16 @@
+import { error } from '@sveltejs/kit';
+import { projectService } from '../../../modules/projects';
+import { can } from '../../../modules/auth';
+
+export async function load({ params, locals }) {
+  if (!can(locals.user, 'stateiac:read')) {
+    throw error(403, 'Forbidden');
+  }
+
+  try {
+    const project = await projectService.getProjectBySlug(params.slug);
+    return { project };
+  } catch {
+    throw error(404, 'Project not found');
+  }
+}
diff --git a/src/routes/project/[slug]/+layout.svelte b/src/routes/project/[slug]/+layout.svelte
new file mode 100644
index 0000000..645611c
--- /dev/null
+++ b/src/routes/project/[slug]/+layout.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import {
+    ArrowLeft,
+    FolderKanban,
+    Info,
+    LayoutDashboard,
+    ScrollText,
+    Shield,
+    Users,
+  } from 'lucide-svelte';
+
+  export let data: { project: { id: string; name: string; slug: string } };
+
+  $: project = data.project;
+
+  $: tabs = [
+    { label: 'Overview', href: `/project/${project.slug}/overview`, icon: LayoutDashboard },
+    { label: 'Información', href: `/project/${project.slug}`, icon: Info },
+    { label: 'Usuarios y Grupos', href: `/project/${project.slug}/users-groups`, icon: Users },
+    { label: 'Roles y Permisos', href: `/project/${project.slug}/roles-permissions`, icon: Shield },
+    { label: 'Auditoría', href: `/project/${project.slug}/audit`, icon: ScrollText },
+  ];
+
+  $: currentPath = $page.url.pathname;
+
+  function isTabActive(href: string) {
+    return currentPath === href;
+  }
+</script>
+
+<div class="mx-auto w-full max-w-7xl">
+  <div class="min-h-130 overflow-hidden border border-slate-200 bg-white shadow-sm sm:rounded-2xl">
+    <div class="border-b border-slate-200 px-6 py-4 sm:px-8">
+      <a
+        href="/overview"
+        class="inline-flex items-center gap-1.5 text-sm text-slate-600 hover:text-slate-900"
+      >
+        <ArrowLeft class="h-4 w-4" />
+        Back to projects
+      </a>
+
+      <div class="mt-3 flex items-center gap-2">
+        <FolderKanban class="h-5 w-5 text-slate-900" />
+        <h2 class="text-lg font-semibold text-slate-900">{project.name}</h2>
+      </div>
+
+      <nav class="mt-4 flex flex-wrap gap-2">
+        {#each tabs as tab}
+          <a
+            href={tab.href}
+            class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors {isTabActive(
+              tab.href,
+            )
+              ? 'bg-slate-900 text-white'
+              : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'}"
+          >
+            <svelte:component this={tab.icon} class="h-3.5 w-3.5" />
+            {tab.label}
+          </a>
+        {/each}
+      </nav>
+    </div>
+    <div class="p-6 sm:p-8">
+      <slot />
+    </div>
+  </div>
+</div>
diff --git a/src/routes/settings/projects/[id]/+page.svelte b/src/routes/project/[slug]/+page.svelte
similarity index 50%
rename from src/routes/settings/projects/[id]/+page.svelte
rename to src/routes/project/[slug]/+page.svelte
index 4230b14..c8d854c 100644
--- a/src/routes/settings/projects/[id]/+page.svelte
+++ b/src/routes/project/[slug]/+page.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
-  import { page } from '$app/stores';
-  import { ArrowLeft, CheckCircle, FolderKanban, Save, Trash2 } from 'lucide-svelte';
+  import { CheckCircle, Save, Trash2 } from 'lucide-svelte';
 
   type ProjectRow = {
     id: string;
@@ -14,45 +12,22 @@
     updatedAt: string;
   };
 
-  let project: ProjectRow | null = null;
-  let loading = false;
+  export let data: { project: ProjectRow };
+
+  $: project = data.project;
+
   let saving = false;
   let error = '';
   let success = '';
 
-  let editName = '';
-  let editSlug = '';
-  let editDescription = '';
-  let editStatus: 'active' | 'inactive' = 'active';
+  let editName = project.name;
+  let editSlug = project.slug;
+  let editDescription = project.description ?? '';
+  let editStatus: 'active' | 'inactive' = project.status;
 
   let deleteModalOpen = false;
   let deleteLoading = false;
 
-  $: projectId = $page.params.id;
-
-  onMount(fetchProject);
-
-  async function fetchProject() {
-    loading = true;
-    error = '';
-
-    try {
-      const res = await fetch(`/api/projects/${projectId}`);
-      const payload = await res.json();
-      if (payload.error) throw new Error(payload.error);
-
-      project = payload.project;
-      editName = project?.name ?? '';
-      editSlug = project?.slug ?? '';
-      editDescription = project?.description ?? '';
-      editStatus = project?.status ?? 'active';
-    } catch (err: unknown) {
-      error = err instanceof Error ? err.message : 'Failed to load project.';
-    } finally {
-      loading = false;
-    }
-  }
-
   function flashSuccess(message: string) {
     success = message;
     setTimeout(() => {
@@ -61,8 +36,6 @@
   }
 
   async function saveProject() {
-    if (!project) return;
-
     error = '';
     if (!editName.trim()) {
       error = 'Project name is required.';
@@ -87,6 +60,10 @@
 
       project = payload.project;
       flashSuccess('Project updated.');
+
+      if (payload.project.slug !== project.slug) {
+        await goto(`/project/${payload.project.slug}`, { invalidateAll: true });
+      }
     } catch (err: unknown) {
       error = err instanceof Error ? err.message : 'Failed to update project.';
     } finally {
@@ -104,8 +81,6 @@
   }
 
   async function confirmDelete() {
-    if (!project) return;
-
     error = '';
     deleteLoading = true;
 
@@ -132,20 +107,10 @@
 </script>
 
 <svelte:head>
-  <title>Project detail - Settings</title>
+  <title>Información - {project.name}</title>
 </svelte:head>
 
 <div class="space-y-6">
-  <div>
-    <a
-      href="/settings/projects"
-      class="inline-flex items-center gap-1.5 text-sm text-slate-600 hover:text-slate-900"
-    >
-      <ArrowLeft class="h-4 w-4" />
-      Back to projects
-    </a>
-  </div>
-
   {#if error}
     <div class="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
       {error}
@@ -160,112 +125,94 @@
     </div>
   {/if}
 
-  {#if loading}
-    <div class="rounded-md border border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-600">
-      Loading project...
-    </div>
-  {:else if !project}
+  <section class="overflow-hidden rounded-md border border-slate-200 bg-white">
     <div
-      class="rounded-md border border-dashed border-slate-300 bg-slate-50 px-3 py-4 text-sm text-slate-600"
+      class="flex flex-col gap-3 border-b border-slate-200 px-4 py-4 sm:flex-row sm:items-center sm:justify-between"
     >
-      Project not found.
-    </div>
-  {:else}
-    <section class="overflow-hidden rounded-md border border-slate-200 bg-white">
-      <div
-        class="flex flex-col gap-3 border-b border-slate-200 px-4 py-4 sm:flex-row sm:items-center sm:justify-between"
+      <p class="text-xs text-slate-500">
+        Created {formatDate(project.createdAt)} · Updated {formatDate(project.updatedAt)}
+      </p>
+
+      <button
+        type="button"
+        on:click={openDeleteModal}
+        class="btn-danger inline-flex items-center gap-1.5 rounded-md px-2.5 py-2 text-xs font-medium"
       >
-        <div class="flex items-center gap-2">
-          <FolderKanban class="h-5 w-5 text-slate-900" />
-          <div>
-            <h3 class="text-lg font-semibold text-slate-900">{project.name}</h3>
-            <p class="text-xs text-slate-500">
-              Created {formatDate(project.createdAt)} · Updated {formatDate(project.updatedAt)}
-            </p>
-          </div>
-        </div>
-
-        <button
-          type="button"
-          on:click={openDeleteModal}
-          class="btn-danger inline-flex items-center gap-1.5 rounded-md px-2.5 py-2 text-xs font-medium"
-        >
-          <Trash2 class="h-3.5 w-3.5" />
-          Delete project
-        </button>
-      </div>
-
-      <div class="space-y-4 px-4 py-4">
-        <div class="grid gap-4 sm:grid-cols-2">
-          <div>
-            <label class="block text-sm font-medium text-slate-700" for="edit-project-name"
-              >Name</label
-            >
-            <input
-              id="edit-project-name"
-              type="text"
-              bind:value={editName}
-              class="field-input mt-2 w-full rounded-md border px-3 py-2 text-sm outline-none transition"
-            />
-          </div>
-
-          <div>
-            <label class="block text-sm font-medium text-slate-700" for="edit-project-slug"
-              >Slug</label
-            >
-            <input
-              id="edit-project-slug"
-              type="text"
-              bind:value={editSlug}
-              class="field-input mt-2 w-full rounded-md border px-3 py-2 text-sm outline-none transition"
-            />
-          </div>
-        </div>
+        <Trash2 class="h-3.5 w-3.5" />
+        Delete project
+      </button>
+    </div>
 
+    <div class="space-y-4 px-4 py-4">
+      <div class="grid gap-4 sm:grid-cols-2">
         <div>
-          <label class="block text-sm font-medium text-slate-700" for="edit-project-description">
-            Description
-          </label>
-          <textarea
-            id="edit-project-description"
-            bind:value={editDescription}
-            rows="4"
+          <label class="block text-sm font-medium text-slate-700" for="edit-project-name"
+            >Name</label
+          >
+          <input
+            id="edit-project-name"
+            type="text"
+            bind:value={editName}
             class="field-input mt-2 w-full rounded-md border px-3 py-2 text-sm outline-none transition"
-            placeholder="Optional description"
-          ></textarea>
+          />
         </div>
 
-        <div class="sm:w-48">
-          <label class="block text-sm font-medium text-slate-700" for="edit-project-status"
-            >Status</label
+        <div>
+          <label class="block text-sm font-medium text-slate-700" for="edit-project-slug"
+            >Slug</label
           >
-          <select
-            id="edit-project-status"
-            bind:value={editStatus}
+          <input
+            id="edit-project-slug"
+            type="text"
+            bind:value={editSlug}
             class="field-input mt-2 w-full rounded-md border px-3 py-2 text-sm outline-none transition"
-          >
-            <option value="active">Active</option>
-            <option value="inactive">Inactive</option>
-          </select>
+          />
         </div>
       </div>
 
-      <div class="flex items-center justify-end gap-2 border-t border-slate-200 px-4 py-3">
-        <button
-          type="button"
-          on:click={saveProject}
-          disabled={saving}
-          class="btn-primary inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium"
+      <div>
+        <label class="block text-sm font-medium text-slate-700" for="edit-project-description">
+          Description
+        </label>
+        <textarea
+          id="edit-project-description"
+          bind:value={editDescription}
+          rows="4"
+          class="field-input mt-2 w-full rounded-md border px-3 py-2 text-sm outline-none transition"
+          placeholder="Optional description"
+        ></textarea>
+      </div>
+
+      <div class="sm:w-48">
+        <label class="block text-sm font-medium text-slate-700" for="edit-project-status"
+          >Status</label
         >
-          <Save class="h-4 w-4" />
-          {saving ? 'Saving...' : 'Save changes'}
-        </button>
+        <select
+          id="edit-project-status"
+          bind:value={editStatus}
+          class="field-input mt-2 w-full rounded-md border px-3 py-2 text-sm outline-none transition"
+        >
+          <option value="active">Active</option>
+          <option value="inactive">Inactive</option>
+        </select>
       </div>
-    </section>
-  {/if}
+    </div>
+
+    <div class="flex items-center justify-end gap-2 border-t border-slate-200 px-4 py-3">
+      <button
+        type="button"
+        on:click={saveProject}
+        disabled={saving}
+        class="btn-primary inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium"
+      >
+        <Save class="h-4 w-4" />
+        {saving ? 'Saving...' : 'Save changes'}
+      </button>
+    </div>
+  </section>
 </div>
 
-{#if deleteModalOpen && project}
+{#if deleteModalOpen}
   <button
     type="button"
     class="fixed inset-0 z-40 bg-slate-900/50"
diff --git a/src/routes/project/[slug]/audit/+page.svelte b/src/routes/project/[slug]/audit/+page.svelte
new file mode 100644
index 0000000..7ab6fe1
--- /dev/null
+++ b/src/routes/project/[slug]/audit/+page.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { ScrollText } from 'lucide-svelte';
+</script>
+
+<svelte:head>
+  <title>Auditoría - Projects</title>
+</svelte:head>
+
+<div class="space-y-6">
+  <section>
+    <h3 class="text-xl font-semibold text-slate-900">Auditoría</h3>
+    <p class="mt-2 text-sm text-slate-600">
+      Historial de cambios y actividad relevante de cada proyecto.
+    </p>
+  </section>
+
+  <div
+    class="flex flex-col items-center justify-center gap-3 rounded-md border border-dashed border-slate-300 bg-slate-50 px-6 py-16 text-center"
+  >
+    <ScrollText class="h-8 w-8 text-slate-400" />
+    <p class="text-sm font-medium text-slate-700">Próximamente</p>
+    <p class="max-w-sm text-sm text-slate-500">
+      El registro de auditoría por proyecto todavía no está disponible.
+    </p>
+  </div>
+</div>
diff --git a/src/routes/project/[slug]/overview/+page.svelte b/src/routes/project/[slug]/overview/+page.svelte
new file mode 100644
index 0000000..df1ec26
--- /dev/null
+++ b/src/routes/project/[slug]/overview/+page.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { FolderKanban } from 'lucide-svelte';
+
+  type ProjectRow = {
+    id: string;
+    name: string;
+    slug: string;
+    description?: string | null;
+    status: 'active' | 'inactive';
+    createdAt: string;
+    updatedAt: string;
+  };
+
+  export let data: { project: ProjectRow };
+
+  $: project = data.project;
+
+  function formatDate(value?: string) {
+    if (!value) return '-';
+    try {
+      return new Date(value).toLocaleString();
+    } catch {
+      return value;
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>Overview - {project.name}</title>
+</svelte:head>
+
+<div class="space-y-6">
+  <section class="overflow-hidden rounded-md border border-slate-200 bg-white">
+    <div class="flex items-center gap-3 border-b border-slate-200 px-4 py-4">
+      <FolderKanban class="h-5 w-5 text-slate-900" />
+      <div>
+        <h3 class="text-lg font-semibold text-slate-900">{project.name}</h3>
+        <p class="text-xs text-slate-500">Slug: {project.slug}</p>
+      </div>
+    </div>
+
+    <dl class="grid gap-4 px-4 py-4 sm:grid-cols-2">
+      <div>
+        <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Estado</dt>
+        <dd class="mt-1">
+          <span
+            class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {project.status ===
+            'active'
+              ? 'bg-emerald-50 text-emerald-700'
+              : 'bg-slate-100 text-slate-600'}"
+          >
+            {project.status === 'active' ? 'Active' : 'Inactive'}
+          </span>
+        </dd>
+      </div>
+
+      <div>
+        <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Descripción</dt>
+        <dd class="mt-1 text-sm text-slate-700">{project.description || 'Sin descripción.'}</dd>
+      </div>
+
+      <div>
+        <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Creado</dt>
+        <dd class="mt-1 text-sm text-slate-700">{formatDate(project.createdAt)}</dd>
+      </div>
+
+      <div>
+        <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Actualizado</dt>
+        <dd class="mt-1 text-sm text-slate-700">{formatDate(project.updatedAt)}</dd>
+      </div>
+    </dl>
+  </section>
+</div>
diff --git a/src/routes/project/[slug]/roles-permissions/+page.svelte b/src/routes/project/[slug]/roles-permissions/+page.svelte
new file mode 100644
index 0000000..75678ba
--- /dev/null
+++ b/src/routes/project/[slug]/roles-permissions/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { Shield } from 'lucide-svelte';
+</script>
+
+<svelte:head>
+  <title>Roles y Permisos - Projects</title>
+</svelte:head>
+
+<div class="space-y-6">
+  <section>
+    <h3 class="text-xl font-semibold text-slate-900">Roles y Permisos</h3>
+    <p class="mt-2 text-sm text-slate-600">Define roles y permisos específicos por proyecto.</p>
+  </section>
+
+  <div
+    class="flex flex-col items-center justify-center gap-3 rounded-md border border-dashed border-slate-300 bg-slate-50 px-6 py-16 text-center"
+  >
+    <Shield class="h-8 w-8 text-slate-400" />
+    <p class="text-sm font-medium text-slate-700">Próximamente</p>
+    <p class="max-w-sm text-sm text-slate-500">
+      Los roles y permisos por proyecto todavía no están disponibles.
+    </p>
+  </div>
+</div>
diff --git a/src/routes/project/[slug]/users-groups/+page.svelte b/src/routes/project/[slug]/users-groups/+page.svelte
new file mode 100644
index 0000000..ab8313f
--- /dev/null
+++ b/src/routes/project/[slug]/users-groups/+page.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Users } from 'lucide-svelte';
+</script>
+
+<svelte:head>
+  <title>Usuarios y Grupos - Projects</title>
+</svelte:head>
+
+<div class="space-y-6">
+  <section>
+    <h3 class="text-xl font-semibold text-slate-900">Usuarios y Grupos</h3>
+    <p class="mt-2 text-sm text-slate-600">
+      Gestiona qué usuarios y grupos tienen acceso a cada proyecto.
+    </p>
+  </section>
+
+  <div
+    class="flex flex-col items-center justify-center gap-3 rounded-md border border-dashed border-slate-300 bg-slate-50 px-6 py-16 text-center"
+  >
+    <Users class="h-8 w-8 text-slate-400" />
+    <p class="text-sm font-medium text-slate-700">Próximamente</p>
+    <p class="max-w-sm text-sm text-slate-500">
+      La gestión de usuarios y grupos por proyecto todavía no está disponible.
+    </p>
+  </div>
+</div>
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
deleted file mode 100644
index 0f9ad8d..0000000
--- a/src/routes/projects/+page.svelte
+++ /dev/null
@@ -1,372 +0,0 @@
-<script lang="ts">
-  import {
-    Search,
-    Layers,
-    ArrowRight,
-    Lock,
-    Unlock,
-    X,
-    Copy,
-    Check,
-    HelpCircle,
-    RefreshCw,
-    Edit2,
-    Trash2,
-  } from 'lucide-svelte';
-  import SubNavbar from '$lib/components/SubNavbar.svelte';
-  import { invalidateAll } from '$app/navigation';
-
-  export let data: any;
-
-  let searchQuery = '';
-  let computedProjects: Record<string, { id: string; name: string; stacks: any[] }> = {};
-
-  $: {
-    computedProjects = {};
-
-    if (data.dbProjects) {
-      for (const dbProject of data.dbProjects) {
-        computedProjects[dbProject.id] = {
-          id: dbProject.id,
-          name: dbProject.name,
-          stacks: [],
-        };
-      }
-    }
-
-    for (const file of data.files || []) {
-      const cleanId = getCleanId(file);
-      const parts = cleanId.split('/');
-
-      let projectId = 'default';
-      let stackId = cleanId;
-      let stackName = getStackName(file);
-
-      if (parts.length > 1) {
-        projectId = parts[0];
-        stackId = parts.slice(1).join('/');
-      }
-
-      if (!computedProjects[projectId]) {
-        computedProjects[projectId] = {
-          id: projectId,
-          name: projectId,
-          stacks: [],
-        };
-      }
-
-      const hasLock = (data.locks || []).some((lockFile: string) =>
-        lockFile.includes(`/${projectId}/${stackId}/`),
-      );
-
-      computedProjects[projectId].stacks.push({
-        fileKey: file,
-        cleanId,
-        stackId,
-        stackName,
-        isLocked: hasLock,
-        summary: (data.stateSummaries as Record<string, any>)?.[file] || { resourceCount: 0 },
-      });
-    }
-  }
-
-  $: filteredProjects = Object.values(computedProjects)
-    .filter((project) => {
-      const projectMatches =
-        project.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        project.id.toLowerCase().includes(searchQuery.toLowerCase());
-      const stackMatches = project.stacks.some((stack) =>
-        stack.stackName.toLowerCase().includes(searchQuery.toLowerCase()),
-      );
-      return projectMatches || stackMatches;
-    })
-    .sort((a, b) => a.name.localeCompare(b.name));
-
-  function getCleanId(fileKey: string) {
-    let id = fileKey;
-    if (id.startsWith('.pulumi/stacks/')) id = id.replace('.pulumi/stacks/', '');
-    if (id.endsWith('.json')) id = id.slice(0, -5);
-    return id;
-  }
-
-  function getStackName(fileKey: string) {
-    return fileKey.split('/').pop()?.replace('.json', '') || fileKey;
-  }
-
-  let actionModalType: 'rename' | 'delete' | 'unlock' | null = null;
-  let actionProject: any = null;
-  let actionStack: any = null;
-  let copiedAction = false;
-  let isSyncing = false;
-
-  async function syncProjects() {
-    isSyncing = true;
-    try {
-      await fetch('/api/projects/sync', { method: 'POST' });
-      await invalidateAll();
-    } catch {
-      alert('Failed to sync projects');
-    } finally {
-      isSyncing = false;
-    }
-  }
-
-  function copyActionCommand() {
-    let command = '';
-    if (actionModalType === 'rename') {
-      command = `# 1. Update the 'name' field in your Pulumi.yaml\n# 2. Rename your stack(s)\npulumi stack rename <new-stack-name> -s ${actionProject?.id}/<old-stack-name>`;
-    } else if (actionModalType === 'delete') {
-      command = `# 1. Destroy resources (optional but recommended)\npulumi destroy -s ${actionProject?.id}/<stack-name>\n\n# 2. Remove the stack from the backend\npulumi stack rm ${actionProject?.id}/<stack-name> --force`;
-    } else if (actionModalType === 'unlock') {
-      command = `pulumi cancel -s ${actionProject?.id}/${actionStack?.stackId}`;
-    }
-
-    navigator.clipboard.writeText(command);
-    copiedAction = true;
-    setTimeout(() => (copiedAction = false), 2000);
-  }
-
-  function selectBackend(id: string) {
-    document.cookie = `active_backend=${id}; path=/; max-age=31536000`;
-    window.location.href = '/pulumi-state';
-  }
-</script>
-
-<svelte:head>
-  <title>Projects - Pulumi Open State</title>
-</svelte:head>
-
-<SubNavbar
-  label="State"
-  options={data.backends || []}
-  activeId={data.activeBackendId || ''}
-  path="/"
-  on:change={(event) => selectBackend(event.detail.id)}
-/>
-
-<div class="mb-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
-  <div>
-    <h2 class="text-2xl font-bold text-gray-900">Projects</h2>
-    {#if data.error}
-      <p class="text-red-500 text-sm mt-1">Error: {data.error}</p>
-    {:else}
-      <p class="text-gray-500 text-sm mt-1">
-        Found {Object.keys(computedProjects).length} projects across {data.files?.length || 0} states.
-      </p>
-    {/if}
-  </div>
-
-  <div class="flex flex-col sm:flex-row items-center gap-3 w-full md:w-auto">
-    <div class="relative w-full sm:w-72 shrink-0">
-      <Search class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
-      <input
-        type="text"
-        bind:value={searchQuery}
-        placeholder="Search projects or stacks..."
-        class="w-full pl-9 pr-4 py-2 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none shadow-sm"
-      />
-    </div>
-    <button
-      on:click={syncProjects}
-      disabled={isSyncing}
-      class="btn-secondary w-full sm:w-auto font-semibold py-2 px-4 rounded-lg text-sm shadow-sm flex items-center justify-center gap-2 shrink-0 disabled:opacity-50"
-      title="Sync projects from backend"
-    >
-      <RefreshCw class="w-4 h-4 {isSyncing ? 'animate-spin text-blue-600' : 'text-gray-500'}" /> Sync
-      States
-    </button>
-    <a
-      href="/pulumi-state/cli-guide"
-      class="btn-secondary w-full sm:w-auto font-semibold py-2 px-4 rounded-lg text-sm shadow-sm flex items-center justify-center gap-2 shrink-0"
-      title="How to connect"
-    >
-      <HelpCircle class="w-4 h-4 text-gray-500" /> CLI Setup
-    </a>
-  </div>
-</div>
-
-<div class="grid grid-cols-1 gap-6">
-  {#each filteredProjects as project}
-    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden flex flex-col">
-      <div class="bg-gray-50 border-b border-gray-200 px-6 py-4 flex items-center justify-between">
-        <div class="flex items-center gap-3">
-          <div class="p-2 bg-blue-100 text-blue-700 rounded-lg">
-            <Layers class="w-5 h-5" />
-          </div>
-          <div>
-            <h3 class="text-lg font-bold text-gray-900 leading-tight">{project.name}</h3>
-            <p class="text-xs text-gray-500 font-mono mt-0.5">Project ID: {project.id}</p>
-          </div>
-        </div>
-        <div class="flex items-center gap-1">
-          <button
-            on:click={() => {
-              actionProject = project;
-              actionModalType = 'rename';
-            }}
-            class="btn-ghost p-1.5 text-gray-400 hover:text-blue-600 rounded transition-colors"
-            title="Rename Project"
-          >
-            <Edit2 class="w-4 h-4" />
-          </button>
-          <button
-            on:click={() => {
-              actionProject = project;
-              actionModalType = 'delete';
-            }}
-            class="btn-ghost p-1.5 text-gray-400 hover:text-red-600 rounded transition-colors"
-            title="Delete Project"
-          >
-            <Trash2 class="w-4 h-4" />
-          </button>
-        </div>
-      </div>
-
-      <div class="p-6">
-        {#if project.stacks.length > 0}
-          <h4 class="text-sm font-semibold text-gray-700 mb-3">Stacks in this project:</h4>
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-            {#each project.stacks as stack}
-                  <a
-                    href={`/pulumi-state/${stack.cleanId}`}
-                class="flex items-center justify-between p-4 rounded-xl border border-gray-200 hover:border-blue-400 hover:bg-blue-50 hover:shadow-sm transition-all group bg-white"
-              >
-                <div class="min-w-0 flex-1">
-                  <p class="font-bold text-gray-900 group-hover:text-blue-700 truncate text-base">
-                    {stack.stackName}
-                  </p>
-                  <div class="flex items-center gap-3 mt-1 text-xs text-gray-500 font-medium">
-                    <span class="flex items-center gap-1.5" title="Resources">
-                      <Layers class="w-3.5 h-3.5 text-gray-400" />
-                      {stack.summary.resourceCount} resources
-                    </span>
-                    {#if stack.summary.version}
-                      <span class="text-gray-300">•</span>
-                      <span title="Pulumi Version">v{stack.summary.version}</span>
-                    {/if}
-                    {#if stack.isLocked}
-                      <span class="text-gray-300">•</span>
-                      <span class="flex items-center gap-1 font-bold text-red-600">
-                        <Lock class="h-3 w-3" />
-                        LOCKED
-                      </span>
-                    {/if}
-                  </div>
-                </div>
-                {#if stack.isLocked}
-                  <button
-                    on:click|preventDefault={() => {
-                      actionProject = project;
-                      actionStack = stack;
-                      actionModalType = 'unlock';
-                    }}
-                    class="btn-ghost p-1.5 text-red-600 rounded-md transition-colors shrink-0 ml-2"
-                    title="Unlock Stack"
-                  >
-                    <Unlock class="h-[18px] w-[18px]" />
-                  </button>
-                {:else}
-                  <div
-                    class="w-8 h-8 rounded-full bg-gray-50 group-hover:bg-white flex items-center justify-center border border-transparent group-hover:border-blue-200 transition-colors shrink-0 ml-3"
-                  >
-                    <ArrowRight class="w-4 h-4 text-gray-400 group-hover:text-blue-600" />
-                  </div>
-                {/if}
-              </a>
-            {/each}
-          </div>
-        {:else}
-          <div class="text-center py-6 text-gray-500">
-            <p class="text-sm">No stacks deployed yet.</p>
-            <p class="text-xs mt-1">
-              Initialize a stack locally using the Pulumi CLI to see it here.
-            </p>
-          </div>
-        {/if}
-      </div>
-    </div>
-  {/each}
-
-  {#if filteredProjects.length === 0 && !data.error}
-    <div
-      class="py-16 text-center text-gray-500 bg-white border border-dashed border-gray-300 rounded-xl"
-    >
-      <Layers class="w-12 h-12 mx-auto mb-3 text-gray-300" />
-      <p class="font-medium text-gray-900">No projects found.</p>
-      <p class="text-sm mt-1">Try adjusting your search or create a new project.</p>
-    </div>
-  {/if}
-</div>
-
-{#if actionModalType !== null && actionProject !== null}
-  <button
-    type="button"
-    class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/50 backdrop-blur-sm"
-    on:click={() => (actionModalType = null)}
-  >
-    <div
-      class="bg-white rounded-2xl shadow-xl w-full max-w-2xl overflow-hidden"
-      role="dialog"
-      aria-modal="true"
-    >
-      <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
-        <h3 class="text-lg font-bold text-gray-900 flex items-center gap-2">
-          {#if actionModalType === 'rename'}
-            <Edit2 class="w-5 h-5 text-blue-600" /> Rename Project
-          {:else}
-            <Trash2 class="w-5 h-5 text-red-600" /> Delete Project
-          {/if}
-        </h3>
-        <button
-          on:click={() => (actionModalType = null)}
-          class="btn-ghost p-1.5 text-gray-400 hover:text-gray-700 rounded-lg transition-colors"
-        >
-          <X class="w-5 h-5" />
-        </button>
-      </div>
-
-      <div class="p-6">
-        <div
-          class="mb-5 p-4 rounded-xl text-sm border {actionModalType === 'rename'
-            ? 'border-blue-200 bg-blue-50 text-blue-800'
-            : 'border-red-200 bg-red-50 text-red-800'}"
-        >
-          {#if actionModalType === 'rename'}
-            <p class="font-semibold">Rename Project</p>
-            <p class="mt-1">
-              Use the Pulumi CLI to rename stack names and update your local Pulumi project
-              structure.
-            </p>
-          {:else}
-            <p class="font-semibold">Delete Project</p>
-            <p class="mt-1">
-              This only removes the local registry entry. The remote state data in your storage
-              backend remains untouched.
-            </p>
-          {/if}
-        </div>
-
-        <div class="bg-gray-900 rounded-xl p-1 relative group overflow-hidden">
-          <div class="absolute top-3 right-3">
-            <button
-              on:click={copyActionCommand}
-              class="btn-ghost p-1.5 bg-gray-800 text-gray-300 hover:text-white rounded-md transition-colors"
-              title="Copy"
-            >
-              {#if copiedAction}
-                <Check class="w-4 h-4 text-green-400" />
-              {:else}
-                <Copy class="w-4 h-4" />
-              {/if}
-            </button>
-          </div>
-          <div class="p-4 text-sm font-mono text-gray-300 overflow-x-auto">
-            <pre class="whitespace-pre-wrap">{actionModalType === 'rename'
-                ? `# 1. Update the 'name' field in your Pulumi.yaml\n# 2. Rename your stack(s)\npulumi stack rename <new-stack-name> -s ${actionProject?.id}/<old-stack-name>`
-                : `# 1. Destroy resources (optional but recommended)\npulumi destroy -s ${actionProject?.id}/<stack-name>\n\n# 2. Remove the stack from the backend\npulumi stack rm ${actionProject?.id}/<stack-name> --force`}</pre>
-          </div>
-        </div>
-      </div>
-    </div>
-  </button>
-{/if}
diff --git a/src/routes/projects/[...id]/+page.server.ts b/src/routes/projects/[...id]/+page.server.ts
deleted file mode 100644
index 3bb6906..0000000
--- a/src/routes/projects/[...id]/+page.server.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-
-export function load({ params, url }: { params: { id: string }; url: URL }) {
-  const query = url.search || '';
-  throw redirect(302, `/pulumi-state/${params.id}${query}`);
-}
diff --git a/src/routes/projects/[...id]/+page.svelte b/src/routes/projects/[...id]/+page.svelte
deleted file mode 100644
index c292ad9..0000000
--- a/src/routes/projects/[...id]/+page.svelte
+++ /dev/null
@@ -1,457 +0,0 @@
-<script lang="ts">
-  import {
-    Box,
-    Package,
-    Server,
-    Code,
-    Layers,
-    Search,
-    History,
-    Clock,
-    Settings,
-  } from 'lucide-svelte';
-  import SubNavbar from '$lib/components/SubNavbar.svelte';
-  import ResourceTree from '$lib/components/ResourceTree.svelte';
-  import OutputsViewer from '$lib/components/OutputsViewer.svelte';
-
-  export let data: any;
-
-  let resourceRoots: any[] = [];
-  let filteredResourceRoots: any[] = [];
-  let stackOutputs: Record<string, any> = {};
-  let environmentConfig: Record<string, any> = {};
-  let selectedResource: any = null;
-  let resourceSearchQuery = '';
-  let activeTab: 'resources' | 'configuration' | 'outputs' | 'history' = 'resources';
-
-  $: {
-    if (data.isHistorical && activeTab === 'history') {
-      activeTab = 'resources';
-    }
-  }
-
-  $: if (data.state) {
-    const resources = data.state.checkpoint?.latest?.resources || [];
-    const stackResource = resources.find(
-      (resource: any) => resource.type === 'pulumi:pulumi:Stack',
-    );
-
-    if (stackResource?.outputs) {
-      stackOutputs = stackResource.outputs;
-    }
-
-    const map = new Map<string, any>();
-    const roots: any[] = [];
-
-    resources.forEach((resource: any) => {
-      map.set(resource.urn, { ...resource, children: [] });
-    });
-
-    resources.forEach((resource: any) => {
-      const node = map.get(resource.urn);
-      if (resource.parent && map.has(resource.parent)) {
-        map.get(resource.parent).children.push(node);
-      } else {
-        roots.push(node);
-      }
-    });
-
-    resourceRoots = roots;
-  }
-
-  $: if (data.history && data.history.length > 0) {
-    environmentConfig = data.history[0]?.config || {};
-  }
-
-  $: {
-    if (resourceSearchQuery.trim() === '') {
-      filteredResourceRoots = resourceRoots.map((resource) => resetForceExpand(resource));
-    } else {
-      filteredResourceRoots = filterTree(resourceRoots, resourceSearchQuery);
-    }
-  }
-
-  function resetForceExpand(node: any): any {
-    return {
-      ...node,
-      _forceExpand: false,
-      children: (node.children || []).map(resetForceExpand),
-    };
-  }
-
-  function filterTree(roots: any[], query: string) {
-    if (!query) return roots;
-    const normalizedQuery = query.toLowerCase();
-
-    function processNode(node: any): any | null {
-      const matches =
-        (node.urn || '').toLowerCase().includes(normalizedQuery) ||
-        (node.type || '').toLowerCase().includes(normalizedQuery);
-      const filteredChildren = [] as any[];
-
-      if (node.children) {
-        for (const child of node.children) {
-          const processed = processNode(child);
-          if (processed) filteredChildren.push(processed);
-        }
-      }
-
-      if (matches || filteredChildren.length > 0) {
-        return {
-          ...node,
-          children: filteredChildren,
-          _forceExpand: true,
-        };
-      }
-
-      return null;
-    }
-
-    const result = [] as any[];
-    for (const root of roots) {
-      const processed = processNode(root);
-      if (processed) result.push(processed);
-    }
-    return result;
-  }
-
-  function getStackName(cleanId: string) {
-    return cleanId || 'Unknown Stack';
-  }
-
-  function handleSelect(event: CustomEvent) {
-    selectedResource = event.detail;
-  }
-
-  function formatDate(unixTimestamp: number) {
-    if (!unixTimestamp) return '';
-    return new Date(unixTimestamp * 1000).toLocaleString();
-  }
-
-  function selectBackend(event: CustomEvent<{ id: string }>) {
-    document.cookie = `active_backend=${event.detail.id}; path=/; max-age=31536000`;
-    window.location.href = '/pulumi-state';
-  }
-</script>
-
-<svelte:head>
-  <title>{getStackName(data.cleanId || '')} - Pulumi State UI</title>
-</svelte:head>
-
-<SubNavbar
-  label="State"
-  options={data.backends || []}
-  activeId={data.activeBackendId || ''}
-  path={`/${data.cleanId || ''}`}
-  on:change={selectBackend}
-/>
-
-{#if data.error}
-  <div class="p-6 bg-red-50 text-red-700 rounded-xl border border-red-200">
-    <h3 class="font-bold text-lg mb-2">Failed to load Stack</h3>
-    <p>{data.error}</p>
-  </div>
-{:else if data.state}
-  {#if data.isHistorical}
-    <div
-      class="mb-6 p-4 bg-amber-50 border border-amber-200 rounded-xl flex flex-col sm:flex-row sm:items-center justify-between text-amber-800 gap-4"
-    >
-      <div class="flex items-center gap-3">
-        <History class="w-6 h-6 text-amber-600 shrink-0" />
-        <div>
-          <h3 class="font-bold text-base">Historical State View</h3>
-          <p class="text-sm text-amber-700 mt-0.5">
-            You are inspecting a checkpoint from the past. The data below does not represent the
-            current live state.
-          </p>
-        </div>
-      </div>
-      <a
-        href="/pulumi-state/{data.cleanId}"
-        class="px-4 py-2 bg-amber-100 hover:bg-amber-200 text-amber-900 text-sm font-bold rounded-lg transition-colors whitespace-nowrap text-center"
-        >Return to Current State</a
-      >
-    </div>
-  {/if}
-
-  <div class="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
-    <div>
-      <h2 class="text-3xl font-bold text-gray-900">{getStackName(data.cleanId)}</h2>
-      <p class="text-sm text-gray-500 mt-1 font-mono">Actual file: {data.key}</p>
-    </div>
-    <div class="flex gap-4">
-      <div class="text-right">
-        <p class="text-xs text-gray-500 uppercase tracking-wider font-semibold">Resources</p>
-        <p class="text-xl font-bold text-gray-900">
-          {data.state?.checkpoint?.latest?.resources?.length || 0}
-        </p>
-      </div>
-      <div class="text-right pl-4 border-l border-gray-200">
-        <p class="text-xs text-gray-500 uppercase tracking-wider font-semibold">Version</p>
-        <p class="text-xl font-bold text-gray-900">{data.state.version}</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
-    <div class="lg:col-span-3 space-y-6">
-      <div class="flex items-center gap-6 border-b border-gray-200 overflow-x-auto">
-        <button
-          on:click={() => (activeTab = 'resources')}
-          class="btn-ghost pb-3 text-sm font-semibold whitespace-nowrap {activeTab === 'resources'
-            ? 'text-blue-600 border-b-2 border-blue-600'
-            : 'text-gray-500 hover:text-gray-700'}"
-          >{data.isHistorical ? 'Checkpoint State' : 'Current State'}</button
-        >
-        <button
-          on:click={() => (activeTab = 'configuration')}
-          class="btn-ghost pb-3 text-sm font-semibold whitespace-nowrap {activeTab === 'configuration'
-            ? 'text-blue-600 border-b-2 border-blue-600'
-            : 'text-gray-500 hover:text-gray-700'}">Configuration</button
-        >
-        <button
-          on:click={() => (activeTab = 'outputs')}
-          class="btn-ghost pb-3 text-sm font-semibold whitespace-nowrap {activeTab === 'outputs'
-            ? 'text-blue-600 border-b-2 border-blue-600'
-            : 'text-gray-500 hover:text-gray-700'}">Outputs</button
-        >
-        <button
-          on:click={() => (activeTab = 'history')}
-          class="btn-ghost pb-3 text-sm font-semibold whitespace-nowrap {activeTab === 'history'
-            ? 'text-blue-600 border-b-2 border-blue-600'
-            : 'text-gray-500 hover:text-gray-700'} flex items-center gap-1.5"
-          ><History class="w-4 h-4" /> Activity History</button
-        >
-      </div>
-
-      {#if activeTab === 'resources'}
-        <div class="space-y-8 animate-in fade-in duration-200">
-          <section>
-            <div
-              class="flex flex-col sm:flex-row sm:items-center justify-between border-b border-gray-200 pb-3 mb-4 gap-3"
-            >
-              <h3 class="text-lg font-bold text-gray-900">Resources</h3>
-              <div class="flex items-center gap-3">
-                <div class="relative">
-                  <Search
-                    class="w-4 h-4 absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400"
-                  />
-                  <input
-                    type="text"
-                    bind:value={resourceSearchQuery}
-                    placeholder="Search URN or type..."
-                    class="w-full sm:w-64 pl-8 pr-3 py-1.5 text-sm bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none shadow-sm"
-                  />
-                </div>
-                <span
-                  class="hidden sm:inline-block text-xs font-semibold px-2 py-1 bg-gray-100 text-gray-600 rounded whitespace-nowrap"
-                  >Tree View</span
-                >
-              </div>
-            </div>
-
-            <div
-              class="bg-white border border-gray-200 rounded-xl p-2 sm:p-4 shadow-sm overflow-x-auto min-h-[400px]"
-            >
-              {#if filteredResourceRoots.length > 0}
-                {#each filteredResourceRoots as rootNode}
-                  <ResourceTree
-                    node={rootNode}
-                    level={0}
-                    selectedUrn={selectedResource?.urn || ''}
-                    on:select={handleSelect}
-                  />
-                {/each}
-              {:else}
-                <p class="text-gray-500 text-sm p-4">No resources match your search.</p>
-              {/if}
-            </div>
-          </section>
-        </div>
-      {:else if activeTab === 'configuration'}
-        <div
-          class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden animate-in fade-in duration-200"
-        >
-          {#if Object.keys(environmentConfig).length > 0}
-            <div class="p-5"><OutputsViewer outputs={environmentConfig} /></div>
-          {:else}
-            <div class="p-12 text-center text-gray-500 flex flex-col items-center">
-              <Settings class="w-12 h-12 mb-3 text-gray-300" />
-              <p>No environment configuration found.</p>
-            </div>
-          {/if}
-        </div>
-      {:else if activeTab === 'outputs'}
-        <div
-          class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden animate-in fade-in duration-200"
-        >
-          {#if Object.keys(stackOutputs).length > 0}
-            <div class="p-5"><OutputsViewer outputs={stackOutputs} /></div>
-          {:else}
-            <div class="p-12 text-center text-gray-500 flex flex-col items-center">
-              <Box class="w-12 h-12 mb-3 text-gray-300" />
-              <p>No stack outputs found.</p>
-            </div>
-          {/if}
-        </div>
-      {:else if activeTab === 'history'}
-        <div
-          class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden animate-in fade-in duration-200"
-        >
-          {#if data.history && data.history.length > 0}
-            <div class="divide-y divide-gray-100">
-              {#each data.history as update}
-                <div class="p-5 hover:bg-gray-50 transition-colors">
-                  <div class="flex items-start justify-between mb-2">
-                    <div>
-                      <div class="flex items-center gap-2 mb-1">
-                        <span
-                          class="px-2 py-0.5 rounded text-xs font-bold uppercase tracking-wider {update.result ===
-                          'succeeded'
-                            ? 'bg-green-100 text-green-700'
-                            : 'bg-red-100 text-red-700'}">{update.result}</span
-                        >
-                        <span class="text-sm font-semibold text-gray-900 capitalize"
-                          >{update.kind || 'update'}</span
-                        >
-                      </div>
-                      <h4 class="text-base font-bold text-gray-900">
-                        {update.message || 'No update message'}
-                      </h4>
-                    </div>
-                    <div class="flex items-center gap-4">
-                      <div class="text-right text-sm text-gray-500 flex flex-col items-end gap-1">
-                        <span class="flex items-center gap-1"
-                          ><Clock class="w-4 h-4" /> {formatDate(update.startTime)}</span
-                        >
-                        {#if update.environment && update.environment['git.author']}
-                          <span class="text-xs"
-                            >by <span class="font-medium text-gray-700"
-                              >{update.environment['git.author']}</span
-                            ></span
-                          >
-                        {/if}
-                      </div>
-                      {#if update.key}
-                        <a
-                          href="?checkpoint={encodeURIComponent(
-                            update.key.replace('.history.json', '.checkpoint.json'),
-                          )}"
-                          class="px-3 py-1.5 bg-white border border-gray-300 hover:border-gray-400 hover:bg-gray-50 text-gray-700 text-xs font-bold rounded-lg shadow-sm transition-all flex items-center gap-1.5 shrink-0"
-                        >
-                          <Search class="w-3 h-3" /> Inspect State
-                        </a>
-                      {/if}
-                    </div>
-                  </div>
-                  {#if update.resourceChanges}
-                    <div class="mt-4 flex gap-3 text-xs">
-                      {#each Object.entries(update.resourceChanges) as [operation, count]}
-                        <div
-                          class="px-2 py-1 rounded bg-gray-100 text-gray-700 font-medium capitalize"
-                        >
-                          {operation}: <span class="font-bold">{count}</span>
-                        </div>
-                      {/each}
-                    </div>
-                  {/if}
-                </div>
-              {/each}
-            </div>
-          {:else}
-            <div class="p-12 text-center text-gray-500 flex flex-col items-center">
-              <History class="w-12 h-12 mb-3 text-gray-300" />
-              <p>No history found for this stack.</p>
-            </div>
-          {/if}
-        </div>
-      {/if}
-    </div>
-
-    <div class="lg:col-span-2 space-y-6">
-      <div
-        class="bg-white rounded-xl border border-gray-200 shadow-sm sticky top-24 overflow-hidden flex flex-col h-[calc(100vh-8rem)]"
-      >
-        <div class="bg-gray-50 border-b border-gray-200 px-5 py-4">
-          <h3 class="font-bold text-gray-900 flex items-center gap-2">
-            <Server class="w-5 h-5 text-blue-600" /> Resource Inspector
-          </h3>
-        </div>
-
-        <div class="p-5 flex-1 overflow-y-auto">
-          {#if selectedResource}
-            <div class="mb-4">
-              <span
-                class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold {selectedResource.custom
-                  ? 'bg-blue-100 text-blue-700'
-                  : 'bg-amber-100 text-amber-700'} mb-3"
-              >
-                {#if selectedResource.custom}
-                  <Box class="w-3 h-3 mr-1" /> Custom Resource
-                {:else}
-                  <Package class="w-3 h-3 mr-1" /> Component Resource
-                {/if}
-              </span>
-              <h4 class="text-lg font-bold text-gray-900 break-all leading-tight">
-                {selectedResource.urn.split('::').pop()}
-              </h4>
-            </div>
-
-            <div class="space-y-4">
-              <div>
-                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">
-                  Type
-                </p>
-                <p class="text-sm font-mono bg-gray-100 px-2 py-1 rounded text-gray-800 break-all">
-                  {selectedResource.type}
-                </p>
-              </div>
-              <div>
-                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">URN</p>
-                <p
-                  class="text-xs font-mono text-gray-500 break-all bg-gray-50 border border-gray-200 p-2 rounded-lg"
-                >
-                  {selectedResource.urn}
-                </p>
-              </div>
-              {#if selectedResource.provider}
-                <div>
-                  <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">
-                    Provider
-                  </p>
-                  <p class="text-xs font-mono text-gray-500 break-all">
-                    {selectedResource.provider.split('::')[0]}
-                  </p>
-                </div>
-              {/if}
-              <hr class="border-gray-200 my-4" />
-              {#if selectedResource.inputs && Object.keys(selectedResource.inputs).length > 0}
-                <div class="mb-4">
-                  <p class="text-sm font-bold flex items-center gap-2 text-gray-900 mb-2">
-                    <Code class="w-4 h-4 text-purple-600" /> Inputs
-                  </p>
-                  <OutputsViewer outputs={selectedResource.inputs} />
-                </div>
-              {/if}
-              {#if selectedResource.outputs && Object.keys(selectedResource.outputs).length > 0}
-                <div>
-                  <p class="text-sm font-bold flex items-center gap-2 text-gray-900 mb-2">
-                    <Layers class="w-4 h-4 text-green-600" /> Outputs
-                  </p>
-                  <OutputsViewer outputs={selectedResource.outputs} />
-                </div>
-              {/if}
-            </div>
-          {:else}
-            <div class="h-full flex flex-col items-center justify-center text-gray-400">
-              <Box class="w-12 h-12 mb-3 text-gray-200" />
-              <p class="text-center text-sm">
-                Select a resource from the tree to view its details.
-              </p>
-            </div>
-          {/if}
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}
diff --git a/src/routes/settings/projects/+page.svelte b/src/routes/settings/projects/+page.svelte
index a400caa..6e6d7c1 100644
--- a/src/routes/settings/projects/+page.svelte
+++ b/src/routes/settings/projects/+page.svelte
@@ -161,9 +161,7 @@
   <section class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
     <div>
       <h3 class="text-xl font-semibold text-slate-900">Projects</h3>
-      <p class="mt-2 text-sm text-slate-600">
-        Create, organize and manage the projects used across State IaC.
-      </p>
+      <p class="mt-2 text-sm text-slate-600">Create, organize and manage the projects.</p>
     </div>
 
     <button
@@ -267,7 +265,7 @@
                 <td class="px-4 py-3">
                   <div class="flex items-center justify-end gap-2">
                     <a
-                      href={`/settings/projects/${project.id}`}
+                      href={`/project/${project.slug}`}
                       class="btn-secondary inline-flex items-center gap-1.5 rounded-md px-2.5 py-2 text-xs font-medium"
                       title="View project"
                     >

From 6130f7c0364a614fe807f5bf886e4ed6b39f1d95 Mon Sep 17 00:00:00 2001
From: Carlos Lopez <carlos@kettu.studio>
Date: Thu, 20 Aug 2026 19:07:17 +0200
Subject: [PATCH 07/16] overview page

---
 src/lib/components/AppNavbar.svelte | 133 ++++++++++++++++++++++------
 src/routes/+layout.server.ts        |   8 ++
 src/routes/+layout.svelte           |  12 ++-
 src/routes/overview/+page.svelte    |  94 +++++++++++++++++++-
 4 files changed, 213 insertions(+), 34 deletions(-)

diff --git a/src/lib/components/AppNavbar.svelte b/src/lib/components/AppNavbar.svelte
index 7a71341..8f8deee 100644
--- a/src/lib/components/AppNavbar.svelte
+++ b/src/lib/components/AppNavbar.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
-  import { ChevronDown, LogOut, UserRound } from 'lucide-svelte';
+  import { page } from '$app/stores';
+  import { ChevronDown, FolderKanban, LogOut, UserRound } from 'lucide-svelte';
 
   export let user: { username: string; role: string } | null = null;
+  export let projects: { id: string; name: string; slug: string }[] = [];
 
   let showUserDropdown = false;
+  let showProjectDropdown = false;
+
+  let userMenuRef: HTMLDivElement | undefined;
+  let projectMenuRef: HTMLDivElement | undefined;
 
   function toggleUserDropdown() {
     showUserDropdown = !showUserDropdown;
@@ -13,55 +19,126 @@
     showUserDropdown = false;
   }
 
+  function toggleProjectDropdown() {
+    showProjectDropdown = !showProjectDropdown;
+  }
+
+  function closeProjectDropdown() {
+    showProjectDropdown = false;
+  }
+
+  // header uses backdrop-blur, which traps fixed-position overlays inside it, so a viewport-wide
+  // backdrop can't be used to detect outside clicks — listen on the window instead.
+  function handleWindowClick(event: MouseEvent) {
+    const target = event.target as Node;
+
+    if (showUserDropdown && userMenuRef && !userMenuRef.contains(target)) {
+      showUserDropdown = false;
+    }
+
+    if (showProjectDropdown && projectMenuRef && !projectMenuRef.contains(target)) {
+      showProjectDropdown = false;
+    }
+  }
+
+  $: currentProject = projects.find((project) => project.slug === $page.params.slug) ?? null;
 </script>
 
+<svelte:window on:click={handleWindowClick} />
+
 <header class="sticky top-0 z-30 border-b border-slate-200/80 bg-white/90 backdrop-blur-xl">
-  <div class="mx-auto flex h-16 w-full items-center justify-between gap-4 px-4 sm:px-6">
+  <div class="mx-auto flex h-16 w-full items-center gap-4 px-4 sm:px-6">
     <a href="/" class="flex items-center">
       <img src="/gitops_logo.png" alt="GitOps" class="h-14 w-auto sm:h-16" />
     </a>
 
-    <a
-      href="/how-to"
-      class="hidden rounded-full border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-600 transition-colors hover:border-slate-300 hover:text-slate-900 md:inline-flex"
-    >
-      How To
-    </a>
+    {#if user}
+      <div class="relative hidden md:block" bind:this={projectMenuRef}>
+        <button
+          type="button"
+          on:click={toggleProjectDropdown}
+          class="btn-secondary flex max-w-55 items-center gap-2 rounded-2xl px-3 py-1.5 text-sm font-medium text-slate-700"
+        >
+          <FolderKanban class="h-4 w-4 shrink-0 text-slate-500" />
+          <span class="truncate">{currentProject ? currentProject.name : 'Select project'}</span>
+          <ChevronDown class="h-3.5 w-3.5 shrink-0 text-slate-500" />
+        </button>
+
+        {#if showProjectDropdown}
+          <div
+            class="absolute left-0 z-50 mt-2 w-64 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl"
+          >
+            {#if projects.length === 0}
+              <p class="px-4 py-3 text-sm text-slate-500">No hay proyectos activos.</p>
+            {:else}
+              <div class="max-h-72 overflow-y-auto py-1">
+                {#each projects as project (project.id)}
+                  <a
+                    href={`/project/${project.slug}/overview`}
+                    on:click={closeProjectDropdown}
+                    class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors hover:bg-slate-50 {currentProject?.id ===
+                    project.id
+                      ? 'text-slate-900'
+                      : 'text-slate-600'}"
+                  >
+                    <FolderKanban class="h-3.5 w-3.5 shrink-0" />
+                    <span class="truncate">{project.name}</span>
+                  </a>
+                {/each}
+              </div>
+            {/if}
+
+            <a
+              href="/overview"
+              on:click={closeProjectDropdown}
+              class="block border-t border-slate-100 bg-slate-50 px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-100"
+            >
+              View all projects
+            </a>
+          </div>
+        {/if}
+      </div>
+    {/if}
+
+    <div class="ml-auto flex items-center gap-3 sm:gap-4">
+      <a
+        href="/how-to"
+        class="hidden rounded-full border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-600 transition-colors hover:border-slate-300 hover:text-slate-900 md:inline-flex"
+      >
+        How To
+      </a>
 
-    <div class="flex items-center gap-3 sm:gap-4">
       {#if user}
-        <div class="relative ml-1">
+        <div class="relative ml-1" bind:this={userMenuRef}>
           <button
             on:click={toggleUserDropdown}
             class="btn-secondary flex items-center gap-2 rounded-2xl px-2 py-1.5 text-left"
           >
-            <div class="flex h-8 w-8 items-center justify-center rounded-xl bg-slate-900 text-xs font-bold uppercase text-white">
+            <div
+              class="flex h-8 w-8 items-center justify-center rounded-xl bg-slate-900 text-xs font-bold uppercase text-white"
+            >
               {user.username.slice(0, 2)}
             </div>
             <ChevronDown class="h-3.5 w-3.5 text-slate-500" />
           </button>
 
           {#if showUserDropdown}
-            <button
-              type="button"
-              class="fixed inset-0 z-40 cursor-default"
-              on:click={closeUserDropdown}
-              aria-label="Close user menu"
-            ></button>
-
-            <div class="absolute right-0 z-50 mt-2 w-56 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl">
+            <div
+              class="absolute right-0 z-50 mt-2 w-56 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl"
+            >
               <div class="border-b border-slate-100 bg-slate-50 px-4 py-3">
                 <p class="truncate text-sm font-semibold text-slate-900">{user.username}</p>
                 <p class="truncate text-xs text-slate-500 capitalize">{user.role.name} Account</p>
               </div>
-                <a
-                  href="/profile"
-                  class="flex items-center gap-2 px-4 py-3 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
-                >
-                  <UserRound class="h-4 w-4" />
-                  Profile
-                </a>
-              <form action="/api/auth/logout" method="POST">
+              <a
+                href="/profile"
+                on:click={closeUserDropdown}
+                class="flex items-center gap-2 px-4 py-3 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
+              >
+                <UserRound class="h-4 w-4" />
+                Profile
+              </a>
+              <form action="/api/auth/logout" method="POST" on:submit={closeUserDropdown}>
                 <button
                   type="submit"
                   class="btn-ghost flex w-full items-center gap-2 px-4 py-3 text-left text-sm font-medium text-red-600 hover:bg-red-50"
@@ -76,4 +153,4 @@
       {/if}
     </div>
   </div>
-</header>
\ No newline at end of file
+</header>
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index 50c23e9..50019d5 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -1,3 +1,5 @@
+import { projectService } from '../modules/projects';
+import { can } from '../modules/auth';
 // import { configService, storageBackendService } from '../modules/config';
 
 export async function load({ cookies, locals }) {
@@ -12,11 +14,17 @@ export async function load({ cookies, locals }) {
   //   activeBackendId = activeBackend.id;
   // }
 
+  const projects =
+    locals.user && can(locals.user, 'stateiac:read')
+      ? (await projectService.listProjects()).filter((project) => project.status === 'active')
+      : [];
+
   return {
     // isConfigured: !!config && backends.length > 0,
     isConfigured: true,
     // backends,
     // activeBackendId,
     user: locals.user,
+    projects,
   };
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a16430b..9df905c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -26,10 +26,14 @@
   style={`--sidebar-width:${sidebarCollapsed ? '96px' : '340px'}`}
 >
   {#if $page.url.pathname !== '/login'}
-    <AppNavbar user={data.user} />
-
-    <div class="mx-auto flex w-full max-w-[1600px] flex-1 flex-col px-4 py-6 sm:px-6 lg:block lg:px-0">
-      <aside class="app-shell-sidebar w-full lg:fixed lg:left-0 lg:top-16 lg:z-20 lg:h-[calc(100vh-4rem)] lg:overflow-y-auto lg:border-r lg:border-slate-200 lg:bg-slate-50 lg:px-4 lg:py-6">
+    <AppNavbar user={data.user} projects={data.projects} />
+
+    <div
+      class="mx-auto flex w-full max-w-[1600px] flex-1 flex-col px-4 py-6 sm:px-6 lg:block lg:px-0"
+    >
+      <aside
+        class="app-shell-sidebar w-full lg:fixed lg:left-0 lg:top-16 lg:z-20 lg:h-[calc(100vh-4rem)] lg:overflow-y-auto lg:border-r lg:border-slate-200 lg:bg-slate-50 lg:px-4 lg:py-6"
+      >
         <AppSidebar
           pathname={$page.url.pathname}
           isConfigured={data.isConfigured}
diff --git a/src/routes/overview/+page.svelte b/src/routes/overview/+page.svelte
index b24b748..cfe373c 100644
--- a/src/routes/overview/+page.svelte
+++ b/src/routes/overview/+page.svelte
@@ -1,5 +1,15 @@
 <script lang="ts">
-  import { ArrowRight, FolderKanban, Search } from 'lucide-svelte';
+  import {
+    ArrowRight,
+    BarChart3,
+    Bot,
+    FileSearch,
+    FolderKanban,
+    GitBranch,
+    Search,
+    Shield,
+    Terminal,
+  } from 'lucide-svelte';
 
   type ProjectRow = {
     id: string;
@@ -15,6 +25,45 @@
 
   let searchQuery = '';
 
+  const guides = [
+    {
+      label: 'Guía de Vault',
+      description: 'Centraliza secretos, credenciales y controles de acceso.',
+      href: '/vault',
+      icon: Shield,
+    },
+    {
+      label: 'Guía de Open Report',
+      description: 'Consulta reportes de vulnerabilidades y dependencias.',
+      href: '/open-report',
+      icon: BarChart3,
+    },
+    {
+      label: 'Guía de State IaC',
+      description: 'Configura backends e inspecciona el estado de Pulumi.',
+      href: '/how-to',
+      icon: GitBranch,
+    },
+    {
+      label: 'GitOps CLI',
+      description: 'Gestiona proyectos y secretos desde la terminal.',
+      href: null,
+      icon: Terminal,
+    },
+    {
+      label: 'GitOps Report CLI',
+      description: 'Genera y consulta reportes de vulnerabilidades desde la terminal.',
+      href: null,
+      icon: FileSearch,
+    },
+    {
+      label: 'GitOps Bot',
+      description: 'CI/CD con análisis automatizado y PRs automáticas.',
+      href: null,
+      icon: Bot,
+    },
+  ];
+
   $: filteredProjects = data.projects.filter((project) => {
     const query = searchQuery.trim().toLowerCase();
     if (!query) return true;
@@ -34,7 +83,48 @@
 <div class="mx-auto w-full max-w-7xl space-y-6">
   <section>
     <h2 class="text-2xl font-semibold text-slate-900">Overview</h2>
-    <p class="mt-2 text-sm text-slate-600">Selecciona un proyecto activo para ver su detalle.</p>
+    <p class="mt-2 text-sm text-slate-600">Bienvenido a GitVault Suite.</p>
+  </section>
+
+  <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+    {#each guides as guide (guide.label)}
+      <svelte:element
+        this={guide.href ? 'a' : 'div'}
+        href={guide.href}
+        class="group flex items-start gap-3 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition-colors {guide.href
+          ? 'hover:border-slate-300 hover:shadow-md'
+          : 'opacity-75'}"
+      >
+        <div
+          class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-slate-700"
+        >
+          <svelte:component this={guide.icon} class="h-5 w-5" />
+        </div>
+        <div class="min-w-0 flex-1">
+          <div class="flex items-center gap-2">
+            <p class="text-sm font-semibold text-slate-900">{guide.label}</p>
+            {#if !guide.href}
+              <span
+                class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-slate-500"
+              >
+                Próximamente
+              </span>
+            {/if}
+          </div>
+          <p class="mt-1 text-xs leading-5 text-slate-600">{guide.description}</p>
+        </div>
+        {#if guide.href}
+          <ArrowRight
+            class="h-4 w-4 shrink-0 text-slate-400 transition-transform group-hover:translate-x-1 group-hover:text-slate-900"
+          />
+        {/if}
+      </svelte:element>
+    {/each}
+  </section>
+
+  <section>
+    <h3 class="text-lg font-semibold text-slate-900">Proyectos</h3>
+    <p class="mt-1 text-sm text-slate-600">Selecciona un proyecto activo para ver su detalle.</p>
   </section>
 
   <section class="relative max-w-md">

From 5030ba4cc679051918e8b66374cd5061ad5ebc63 Mon Sep 17 00:00:00 2001
From: Carlos Lopez <carlos@kettu.studio>
Date: Thu, 20 Aug 2026 19:18:43 +0200
Subject: [PATCH 08/16] sidebar changes

---
 src/lib/components/AppSidebar.svelte | 99 +++++++++++++++++++++++++++-
 1 file changed, 97 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/AppSidebar.svelte b/src/lib/components/AppSidebar.svelte
index 027f9fa..020b485 100644
--- a/src/lib/components/AppSidebar.svelte
+++ b/src/lib/components/AppSidebar.svelte
@@ -8,11 +8,13 @@
     FolderKanban,
     GitBranch,
     HelpCircle,
+    Info,
     KeyRound,
     LayoutDashboard,
     Lock,
     PanelLeftClose,
     PanelLeftOpen,
+    ScrollText,
     Settings,
     Shield,
     Users,
@@ -114,6 +116,32 @@
 
   let settingsMenuOpen = pathname.startsWith('/settings');
   let pulumiStateMenuOpen = pathname.startsWith('/pulumi-state');
+  let projectSettingsMenuOpen = true;
+
+  $: currentProjectSlug = $page.params.slug as string | undefined;
+
+  $: projectSettingsItems = currentProjectSlug
+    ? [
+        { label: 'Información', href: `/project/${currentProjectSlug}/overview`, icon: Info },
+        {
+          label: 'Users and Groups',
+          href: `/project/${currentProjectSlug}/users-groups`,
+          icon: Users,
+        },
+        {
+          label: 'Roles and Permissions',
+          href: `/project/${currentProjectSlug}/roles-permissions`,
+          icon: Shield,
+        },
+        { label: 'Audit', href: `/project/${currentProjectSlug}/audit`, icon: ScrollText },
+      ]
+    : [];
+
+  function isProjectSettingsItemActive(href: string) {
+    return href === `/project/${currentProjectSlug}`
+      ? currentPath === href
+      : currentPath.startsWith(href);
+  }
 
   function getPulumiStateActiveItem() {
     if (
@@ -171,9 +199,9 @@
       {#if !collapsed}
         <div class="min-w-0">
           <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
-            Modules
+            Organization
           </p>
-          <h2 class="mt-1 text-sm font-semibold text-slate-900">Navigation</h2>
+          <h2 class="mt-1 text-sm font-semibold text-slate-900">GitOps</h2>
         </div>
       {/if}
 
@@ -304,6 +332,73 @@
       </section>
     {/each}
 
+    {#if currentProjectSlug}
+      <section>
+        {#if !collapsed}
+          <div class="mb-2 px-1">
+            <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
+              Proyecto
+            </p>
+          </div>
+        {/if}
+
+        {#if collapsed}
+          <a
+            href={`/project/${currentProjectSlug}`}
+            class="group flex items-center justify-center rounded-md border px-3 py-2.5 transition-colors border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"
+            title="Project Settings"
+          >
+            <div
+              class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-600"
+            >
+              <FolderKanban class="h-3.5 w-3.5" />
+            </div>
+          </a>
+        {:else}
+          <div class="space-y-2">
+            <button
+              type="button"
+              class="btn-secondary group flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-left text-slate-700 transition-colors"
+              on:click={() => (projectSettingsMenuOpen = !projectSettingsMenuOpen)}
+              aria-expanded={projectSettingsMenuOpen}
+            >
+              <div
+                class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-600"
+              >
+                <FolderKanban class="h-3.5 w-3.5" />
+              </div>
+              <p class="min-w-0 flex-1 truncate text-sm font-medium">Project Settings</p>
+              {#if projectSettingsMenuOpen}
+                <ChevronDown class="h-4 w-4 shrink-0" />
+              {:else}
+                <ChevronRight class="h-4 w-4 shrink-0" />
+              {/if}
+            </button>
+
+            {#if projectSettingsMenuOpen}
+              <div class="ml-4 border-l border-slate-200 pl-3">
+                <div class="space-y-1">
+                  {#each projectSettingsItems as item}
+                    <a
+                      href={item.href}
+                      class="group flex items-center gap-2 rounded-md px-2.5 py-2 text-sm transition-colors {isProjectSettingsItemActive(
+                        item.href,
+                      )
+                        ? 'bg-slate-100 text-slate-900'
+                        : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}"
+                    >
+                      <svelte:component this={item.icon} class="h-3.5 w-3.5 shrink-0" />
+                      <span class="truncate">{item.label}</span>
+                    </a>
+                  {/each}
+                </div>
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </section>
+    {/if}
+
     <section class="border-t border-slate-200 pt-4">
       {#if !collapsed}
         <div class="mb-2 px-1">

From b87073f7dd5aec41f3e1bd15df24bac20dbf80b0 Mon Sep 17 00:00:00 2001
From: Carlos Lopez <carlos@kettu.studio>
Date: Thu, 20 Aug 2026 19:26:57 +0200
Subject: [PATCH 09/16] organization sidebar + urls

---
 src/lib/components/AppNavbar.svelte           |  5 ++--
 src/lib/components/AppSidebar.svelte          | 26 ++++++++++++-----
 .../application/organization.service.ts       |  8 +++++
 src/modules/organization/index.ts             |  4 +++
 src/routes/+layout.server.ts                  |  4 +++
 src/routes/+layout.svelte                     |  7 ++++-
 src/routes/+page.server.ts                    |  6 ++--
 src/routes/org/[org]/+layout.server.ts        |  6 ++++
 .../{ => org/[org]}/overview/+page.server.ts  |  4 +--
 .../{ => org/[org]}/overview/+page.svelte     |  5 +++-
 .../[org]/projects}/[slug]/+layout.server.ts  |  4 +--
 .../[org]/projects}/[slug]/+layout.svelte     | 29 +++++++++++++++----
 .../[org]/projects}/[slug]/+page.svelte       |  4 ++-
 .../[org]/projects}/[slug]/audit/+page.svelte |  0
 .../projects}/[slug]/overview/+page.svelte    |  0
 .../[slug]/roles-permissions/+page.svelte     |  0
 .../[slug]/users-groups/+page.svelte          |  0
 src/routes/project/+page.server.ts            |  5 ----
 src/routes/settings/projects/+page.server.ts  |  6 ++++
 src/routes/settings/projects/+page.svelte     |  4 ++-
 20 files changed, 96 insertions(+), 31 deletions(-)
 create mode 100644 src/modules/organization/application/organization.service.ts
 create mode 100644 src/modules/organization/index.ts
 create mode 100644 src/routes/org/[org]/+layout.server.ts
 rename src/routes/{ => org/[org]}/overview/+page.server.ts (75%)
 rename src/routes/{ => org/[org]}/overview/+page.svelte (97%)
 rename src/routes/{project => org/[org]/projects}/[slug]/+layout.server.ts (74%)
 rename src/routes/{project => org/[org]/projects}/[slug]/+layout.svelte (70%)
 rename src/routes/{project => org/[org]/projects}/[slug]/+page.svelte (97%)
 rename src/routes/{project => org/[org]/projects}/[slug]/audit/+page.svelte (100%)
 rename src/routes/{project => org/[org]/projects}/[slug]/overview/+page.svelte (100%)
 rename src/routes/{project => org/[org]/projects}/[slug]/roles-permissions/+page.svelte (100%)
 rename src/routes/{project => org/[org]/projects}/[slug]/users-groups/+page.svelte (100%)
 delete mode 100644 src/routes/project/+page.server.ts
 create mode 100644 src/routes/settings/projects/+page.server.ts

diff --git a/src/lib/components/AppNavbar.svelte b/src/lib/components/AppNavbar.svelte
index 8f8deee..7d13a60 100644
--- a/src/lib/components/AppNavbar.svelte
+++ b/src/lib/components/AppNavbar.svelte
@@ -4,6 +4,7 @@
 
   export let user: { username: string; role: string } | null = null;
   export let projects: { id: string; name: string; slug: string }[] = [];
+  export let organizationSlug = 'gitops';
 
   let showUserDropdown = false;
   let showProjectDropdown = false;
@@ -74,7 +75,7 @@
               <div class="max-h-72 overflow-y-auto py-1">
                 {#each projects as project (project.id)}
                   <a
-                    href={`/project/${project.slug}/overview`}
+                    href={`/org/${organizationSlug}/projects/${project.slug}/overview`}
                     on:click={closeProjectDropdown}
                     class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors hover:bg-slate-50 {currentProject?.id ===
                     project.id
@@ -89,7 +90,7 @@
             {/if}
 
             <a
-              href="/overview"
+              href={`/org/${organizationSlug}/overview`}
               on:click={closeProjectDropdown}
               class="block border-t border-slate-100 bg-slate-50 px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-100"
             >
diff --git a/src/lib/components/AppSidebar.svelte b/src/lib/components/AppSidebar.svelte
index 020b485..b4e9344 100644
--- a/src/lib/components/AppSidebar.svelte
+++ b/src/lib/components/AppSidebar.svelte
@@ -22,16 +22,17 @@
   export let pathname = '/';
   export let isConfigured = false;
   export let collapsed = false;
+  export let organizationSlug = 'gitops';
 
   let currentPath = pathname;
 
-  const sections = [
+  $: sections = [
     {
       title: 'Inicio',
       items: [
         {
           label: 'Overview',
-          href: '/overview',
+          href: `/org/${organizationSlug}/overview`,
           icon: LayoutDashboard,
         },
       ],
@@ -118,27 +119,36 @@
   let pulumiStateMenuOpen = pathname.startsWith('/pulumi-state');
   let projectSettingsMenuOpen = true;
 
+  $: currentProjectOrgSlug = ($page.params.org as string | undefined) ?? organizationSlug;
   $: currentProjectSlug = $page.params.slug as string | undefined;
 
   $: projectSettingsItems = currentProjectSlug
     ? [
-        { label: 'Información', href: `/project/${currentProjectSlug}/overview`, icon: Info },
+        {
+          label: 'Información',
+          href: `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/overview`,
+          icon: Info,
+        },
         {
           label: 'Users and Groups',
-          href: `/project/${currentProjectSlug}/users-groups`,
+          href: `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/users-groups`,
           icon: Users,
         },
         {
           label: 'Roles and Permissions',
-          href: `/project/${currentProjectSlug}/roles-permissions`,
+          href: `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/roles-permissions`,
           icon: Shield,
         },
-        { label: 'Audit', href: `/project/${currentProjectSlug}/audit`, icon: ScrollText },
+        {
+          label: 'Audit',
+          href: `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/audit`,
+          icon: ScrollText,
+        },
       ]
     : [];
 
   function isProjectSettingsItemActive(href: string) {
-    return href === `/project/${currentProjectSlug}`
+    return href === `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}`
       ? currentPath === href
       : currentPath.startsWith(href);
   }
@@ -344,7 +354,7 @@
 
         {#if collapsed}
           <a
-            href={`/project/${currentProjectSlug}`}
+            href={`/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}`}
             class="group flex items-center justify-center rounded-md border px-3 py-2.5 transition-colors border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"
             title="Project Settings"
           >
diff --git a/src/modules/organization/application/organization.service.ts b/src/modules/organization/application/organization.service.ts
new file mode 100644
index 0000000..71d885b
--- /dev/null
+++ b/src/modules/organization/application/organization.service.ts
@@ -0,0 +1,8 @@
+export type Organization = { id: string; name: string; slug: string };
+
+export class OrganizationService {
+  // stub: no persistence yet, always resolves to the single default organization
+  async findBySlug(_slug: string): Promise<Organization> {
+    return { id: 'gitops', name: 'GitOps', slug: 'gitops' };
+  }
+}
diff --git a/src/modules/organization/index.ts b/src/modules/organization/index.ts
new file mode 100644
index 0000000..635db93
--- /dev/null
+++ b/src/modules/organization/index.ts
@@ -0,0 +1,4 @@
+import { OrganizationService } from './application/organization.service';
+
+export const organizationService = new OrganizationService();
+export type { Organization } from './application/organization.service';
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index 50019d5..d268e40 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -1,4 +1,5 @@
 import { projectService } from '../modules/projects';
+import { organizationService } from '../modules/organization';
 import { can } from '../modules/auth';
 // import { configService, storageBackendService } from '../modules/config';
 
@@ -14,6 +15,8 @@ export async function load({ cookies, locals }) {
   //   activeBackendId = activeBackend.id;
   // }
 
+  const organization = await organizationService.findBySlug('gitops');
+
   const projects =
     locals.user && can(locals.user, 'stateiac:read')
       ? (await projectService.listProjects()).filter((project) => project.status === 'active')
@@ -25,6 +28,7 @@ export async function load({ cookies, locals }) {
     // backends,
     // activeBackendId,
     user: locals.user,
+    organization,
     projects,
   };
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9df905c..f406163 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -26,7 +26,11 @@
   style={`--sidebar-width:${sidebarCollapsed ? '96px' : '340px'}`}
 >
   {#if $page.url.pathname !== '/login'}
-    <AppNavbar user={data.user} projects={data.projects} />
+    <AppNavbar
+      user={data.user}
+      projects={data.projects}
+      organizationSlug={data.organization.slug}
+    />
 
     <div
       class="mx-auto flex w-full max-w-[1600px] flex-1 flex-col px-4 py-6 sm:px-6 lg:block lg:px-0"
@@ -37,6 +41,7 @@
         <AppSidebar
           pathname={$page.url.pathname}
           isConfigured={data.isConfigured}
+          organizationSlug={data.organization.slug}
           bind:collapsed={sidebarCollapsed}
         />
       </aside>
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 957b07d..e23bdf3 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -1,5 +1,7 @@
 import { redirect } from '@sveltejs/kit';
+import { organizationService } from '../modules/organization';
 
-export function load() {
-  throw redirect(302, '/overview');
+export async function load() {
+  const organization = await organizationService.findBySlug('gitops');
+  throw redirect(302, `/org/${organization.slug}/overview`);
 }
diff --git a/src/routes/org/[org]/+layout.server.ts b/src/routes/org/[org]/+layout.server.ts
new file mode 100644
index 0000000..577d60b
--- /dev/null
+++ b/src/routes/org/[org]/+layout.server.ts
@@ -0,0 +1,6 @@
+import { organizationService } from '../../../modules/organization';
+
+export async function load({ params }) {
+  const organization = await organizationService.findBySlug(params.org);
+  return { organization };
+}
diff --git a/src/routes/overview/+page.server.ts b/src/routes/org/[org]/overview/+page.server.ts
similarity index 75%
rename from src/routes/overview/+page.server.ts
rename to src/routes/org/[org]/overview/+page.server.ts
index cea2664..20194ff 100644
--- a/src/routes/overview/+page.server.ts
+++ b/src/routes/org/[org]/overview/+page.server.ts
@@ -1,6 +1,6 @@
 import { error } from '@sveltejs/kit';
-import { projectService } from '../../modules/projects';
-import { can } from '../../modules/auth';
+import { projectService } from '../../../../modules/projects';
+import { can } from '../../../../modules/auth';
 
 export async function load({ locals }) {
   if (!can(locals.user, 'stateiac:read')) {
diff --git a/src/routes/overview/+page.svelte b/src/routes/org/[org]/overview/+page.svelte
similarity index 97%
rename from src/routes/overview/+page.svelte
rename to src/routes/org/[org]/overview/+page.svelte
index cfe373c..cb59b19 100644
--- a/src/routes/overview/+page.svelte
+++ b/src/routes/org/[org]/overview/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { page } from '$app/stores';
   import {
     ArrowRight,
     BarChart3,
@@ -23,6 +24,8 @@
 
   export let data: { projects: ProjectRow[] };
 
+  $: orgSlug = $page.params.org;
+
   let searchQuery = '';
 
   const guides = [
@@ -151,7 +154,7 @@
     <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
       {#each filteredProjects as project (project.id)}
         <a
-          href={`/project/${project.slug}/overview`}
+          href={`/org/${orgSlug}/projects/${project.slug}/overview`}
           class="group flex flex-col justify-between rounded-md border border-slate-200 bg-white p-5 shadow-sm transition-colors hover:border-slate-300 hover:shadow-md"
         >
           <div>
diff --git a/src/routes/project/[slug]/+layout.server.ts b/src/routes/org/[org]/projects/[slug]/+layout.server.ts
similarity index 74%
rename from src/routes/project/[slug]/+layout.server.ts
rename to src/routes/org/[org]/projects/[slug]/+layout.server.ts
index bd8e1c9..3a5de88 100644
--- a/src/routes/project/[slug]/+layout.server.ts
+++ b/src/routes/org/[org]/projects/[slug]/+layout.server.ts
@@ -1,6 +1,6 @@
 import { error } from '@sveltejs/kit';
-import { projectService } from '../../../modules/projects';
-import { can } from '../../../modules/auth';
+import { projectService } from '../../../../../modules/projects';
+import { can } from '../../../../../modules/auth';
 
 export async function load({ params, locals }) {
   if (!can(locals.user, 'stateiac:read')) {
diff --git a/src/routes/project/[slug]/+layout.svelte b/src/routes/org/[org]/projects/[slug]/+layout.svelte
similarity index 70%
rename from src/routes/project/[slug]/+layout.svelte
rename to src/routes/org/[org]/projects/[slug]/+layout.svelte
index 645611c..fd247a9 100644
--- a/src/routes/project/[slug]/+layout.svelte
+++ b/src/routes/org/[org]/projects/[slug]/+layout.svelte
@@ -13,13 +13,30 @@
   export let data: { project: { id: string; name: string; slug: string } };
 
   $: project = data.project;
+  $: orgSlug = $page.params.org;
 
   $: tabs = [
-    { label: 'Overview', href: `/project/${project.slug}/overview`, icon: LayoutDashboard },
-    { label: 'Información', href: `/project/${project.slug}`, icon: Info },
-    { label: 'Usuarios y Grupos', href: `/project/${project.slug}/users-groups`, icon: Users },
-    { label: 'Roles y Permisos', href: `/project/${project.slug}/roles-permissions`, icon: Shield },
-    { label: 'Auditoría', href: `/project/${project.slug}/audit`, icon: ScrollText },
+    {
+      label: 'Overview',
+      href: `/org/${orgSlug}/projects/${project.slug}/overview`,
+      icon: LayoutDashboard,
+    },
+    { label: 'Información', href: `/org/${orgSlug}/projects/${project.slug}`, icon: Info },
+    {
+      label: 'Usuarios y Grupos',
+      href: `/org/${orgSlug}/projects/${project.slug}/users-groups`,
+      icon: Users,
+    },
+    {
+      label: 'Roles y Permisos',
+      href: `/org/${orgSlug}/projects/${project.slug}/roles-permissions`,
+      icon: Shield,
+    },
+    {
+      label: 'Auditoría',
+      href: `/org/${orgSlug}/projects/${project.slug}/audit`,
+      icon: ScrollText,
+    },
   ];
 
   $: currentPath = $page.url.pathname;
@@ -33,7 +50,7 @@
   <div class="min-h-130 overflow-hidden border border-slate-200 bg-white shadow-sm sm:rounded-2xl">
     <div class="border-b border-slate-200 px-6 py-4 sm:px-8">
       <a
-        href="/overview"
+        href={`/org/${orgSlug}/overview`}
         class="inline-flex items-center gap-1.5 text-sm text-slate-600 hover:text-slate-900"
       >
         <ArrowLeft class="h-4 w-4" />
diff --git a/src/routes/project/[slug]/+page.svelte b/src/routes/org/[org]/projects/[slug]/+page.svelte
similarity index 97%
rename from src/routes/project/[slug]/+page.svelte
rename to src/routes/org/[org]/projects/[slug]/+page.svelte
index c8d854c..e4d0795 100644
--- a/src/routes/project/[slug]/+page.svelte
+++ b/src/routes/org/[org]/projects/[slug]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
   import { CheckCircle, Save, Trash2 } from 'lucide-svelte';
 
   type ProjectRow = {
@@ -15,6 +16,7 @@
   export let data: { project: ProjectRow };
 
   $: project = data.project;
+  $: orgSlug = $page.params.org;
 
   let saving = false;
   let error = '';
@@ -62,7 +64,7 @@
       flashSuccess('Project updated.');
 
       if (payload.project.slug !== project.slug) {
-        await goto(`/project/${payload.project.slug}`, { invalidateAll: true });
+        await goto(`/org/${orgSlug}/projects/${payload.project.slug}`, { invalidateAll: true });
       }
     } catch (err: unknown) {
       error = err instanceof Error ? err.message : 'Failed to update project.';
diff --git a/src/routes/project/[slug]/audit/+page.svelte b/src/routes/org/[org]/projects/[slug]/audit/+page.svelte
similarity index 100%
rename from src/routes/project/[slug]/audit/+page.svelte
rename to src/routes/org/[org]/projects/[slug]/audit/+page.svelte
diff --git a/src/routes/project/[slug]/overview/+page.svelte b/src/routes/org/[org]/projects/[slug]/overview/+page.svelte
similarity index 100%
rename from src/routes/project/[slug]/overview/+page.svelte
rename to src/routes/org/[org]/projects/[slug]/overview/+page.svelte
diff --git a/src/routes/project/[slug]/roles-permissions/+page.svelte b/src/routes/org/[org]/projects/[slug]/roles-permissions/+page.svelte
similarity index 100%
rename from src/routes/project/[slug]/roles-permissions/+page.svelte
rename to src/routes/org/[org]/projects/[slug]/roles-permissions/+page.svelte
diff --git a/src/routes/project/[slug]/users-groups/+page.svelte b/src/routes/org/[org]/projects/[slug]/users-groups/+page.svelte
similarity index 100%
rename from src/routes/project/[slug]/users-groups/+page.svelte
rename to src/routes/org/[org]/projects/[slug]/users-groups/+page.svelte
diff --git a/src/routes/project/+page.server.ts b/src/routes/project/+page.server.ts
deleted file mode 100644
index 3ff99af..0000000
--- a/src/routes/project/+page.server.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-
-export function load() {
-  throw redirect(302, '/settings/projects');
-}
diff --git a/src/routes/settings/projects/+page.server.ts b/src/routes/settings/projects/+page.server.ts
new file mode 100644
index 0000000..e0edc9e
--- /dev/null
+++ b/src/routes/settings/projects/+page.server.ts
@@ -0,0 +1,6 @@
+import { organizationService } from '../../../modules/organization';
+
+export async function load() {
+  const organization = await organizationService.findBySlug('gitops');
+  return { organization };
+}
diff --git a/src/routes/settings/projects/+page.svelte b/src/routes/settings/projects/+page.svelte
index 6e6d7c1..877e1ab 100644
--- a/src/routes/settings/projects/+page.svelte
+++ b/src/routes/settings/projects/+page.svelte
@@ -2,6 +2,8 @@
   import { onMount } from 'svelte';
   import { CheckCircle, Eye, FolderKanban, Plus, Search, Trash2 } from 'lucide-svelte';
 
+  export let data: { organization: { slug: string } };
+
   type ProjectRow = {
     id: string;
     name: string;
@@ -265,7 +267,7 @@
                 <td class="px-4 py-3">
                   <div class="flex items-center justify-end gap-2">
                     <a
-                      href={`/project/${project.slug}`}
+                      href={`/org/${data.organization.slug}/projects/${project.slug}`}
                       class="btn-secondary inline-flex items-center gap-1.5 rounded-md px-2.5 py-2 text-xs font-medium"
                       title="View project"
                     >

From 16f582a430821459727e4ab10f5109e0aec43bde Mon Sep 17 00:00:00 2001
From: Carlos Lopez <carlos@kettu.studio>
Date: Thu, 20 Aug 2026 19:35:28 +0200
Subject: [PATCH 10/16] project modules

---
 src/lib/database/schemas.ts                   | 54 +++++++++++----
 .../projects/application/project.service.ts   | 31 ++++++++-
 src/modules/projects/domain/project.domain.ts | 68 +++++++++++--------
 .../repositories/project.repostitory.ts       | 29 ++++++--
 src/routes/api/projects/+server.ts            |  2 +
 src/routes/api/projects/[id]/+server.ts       |  2 +
 src/routes/api/projects/sync/+server.ts       |  3 +-
 .../org/[org]/projects/[slug]/+page.svelte    | 43 +++++++++++-
 8 files changed, 179 insertions(+), 53 deletions(-)

diff --git a/src/lib/database/schemas.ts b/src/lib/database/schemas.ts
index f6bde5d..dd5c620 100644
--- a/src/lib/database/schemas.ts
+++ b/src/lib/database/schemas.ts
@@ -7,9 +7,15 @@ export const UserEntity = entity('users', {
   passwordHash: text().notNull(),
   roleId: uuid().notNull(),
   status: text().notNull().default('active'),
-  authProviders: json().notNull().$defaultFn(() => []),
-  createdAt: timestamp().notNull().$defaultFn(() => new Date().toISOString()),
-  updatedAt: timestamp().notNull().$defaultFn(() => new Date().toISOString()),
+  authProviders: json()
+    .notNull()
+    .$defaultFn(() => []),
+  createdAt: timestamp()
+    .notNull()
+    .$defaultFn(() => new Date().toISOString()),
+  updatedAt: timestamp()
+    .notNull()
+    .$defaultFn(() => new Date().toISOString()),
   lastLoginAt: timestamp(),
   disabled: bool().notNull().default(false),
 });
@@ -18,9 +24,15 @@ export const RoleEntity = entity('roles', {
   id: uuid().primaryKey(),
   slug: text().notNull(),
   name: text().notNull(),
-  permissions: json().notNull().$defaultFn(() => []),
-  createdAt: timestamp().notNull().$defaultFn(() => new Date().toISOString()),
-  updatedAt: timestamp().notNull().$defaultFn(() => new Date().toISOString()),
+  permissions: json()
+    .notNull()
+    .$defaultFn(() => []),
+  createdAt: timestamp()
+    .notNull()
+    .$defaultFn(() => new Date().toISOString()),
+  updatedAt: timestamp()
+    .notNull()
+    .$defaultFn(() => new Date().toISOString()),
 });
 
 export const ApiKeyEntity = entity('api_keys', {
@@ -32,7 +44,9 @@ export const ApiKeyEntity = entity('api_keys', {
   expiresAt: timestamp(),
   lastUsedAt: timestamp(),
   revokedAt: timestamp(),
-  createdAt: timestamp().notNull().$defaultFn(() => new Date().toISOString()),
+  createdAt: timestamp()
+    .notNull()
+    .$defaultFn(() => new Date().toISOString()),
 });
 
 export const relations = defineRelations();
@@ -46,15 +60,21 @@ relations.for(ApiKeyEntity, ({ one }) => ({
   user: one(UserEntity, { fields: ['userId'], references: ['id'] }),
 }));
 
-
 export const ProjectEntity = entity('projects', {
   id: uuid().primaryKey(),
   slug: text().notNull(),
   name: text().notNull(),
   description: text(),
   status: text().notNull().default('active'),
-  createdAt: timestamp().notNull().$defaultFn(() => new Date().toISOString()),
-  updatedAt: timestamp().notNull().$defaultFn(() => new Date().toISOString()),
+  modules: json()
+    .notNull()
+    .$defaultFn(() => ({ vault: true, openreport: true, stateiac: true })),
+  createdAt: timestamp()
+    .notNull()
+    .$defaultFn(() => new Date().toISOString()),
+  updatedAt: timestamp()
+    .notNull()
+    .$defaultFn(() => new Date().toISOString()),
 });
 
 export const ProjectRoleEntity = entity('project_roles', {
@@ -62,9 +82,15 @@ export const ProjectRoleEntity = entity('project_roles', {
   projectId: uuid().notNull(),
   slug: text().notNull(),
   name: text().notNull(),
-  permissions: json().notNull().$defaultFn(() => []),
-  createdAt: timestamp().notNull().$defaultFn(() => new Date().toISOString()),
-  updatedAt: timestamp().notNull().$defaultFn(() => new Date().toISOString()),
+  permissions: json()
+    .notNull()
+    .$defaultFn(() => []),
+  createdAt: timestamp()
+    .notNull()
+    .$defaultFn(() => new Date().toISOString()),
+  updatedAt: timestamp()
+    .notNull()
+    .$defaultFn(() => new Date().toISOString()),
 });
 
 relations.for(ProjectEntity, ({ many }) => ({
@@ -73,4 +99,4 @@ relations.for(ProjectEntity, ({ many }) => ({
 
 relations.for(ProjectRoleEntity, ({ one }) => ({
   project: one(ProjectEntity, { fields: ['projectId'], references: ['id'] }),
-}));
\ No newline at end of file
+}));
diff --git a/src/modules/projects/application/project.service.ts b/src/modules/projects/application/project.service.ts
index 43c7d41..89a92d7 100644
--- a/src/modules/projects/application/project.service.ts
+++ b/src/modules/projects/application/project.service.ts
@@ -1,5 +1,6 @@
 import crypto from 'crypto';
 import { ProjectRepository } from '../infrastructure/repositories/project.repostitory';
+import { DEFAULT_PROJECT_MODULES, type ProjectModules } from '../domain/project.domain';
 
 export type ProjectStatusValue = 'active' | 'inactive';
 
@@ -32,6 +33,7 @@ export class ProjectService {
     slug?: string;
     description?: string;
     status?: string;
+    modules?: Partial<ProjectModules>;
   }) {
     const name = input.name.trim();
     if (!name) {
@@ -54,6 +56,7 @@ export class ProjectService {
       name,
       description: input.description?.trim() || undefined,
       status: this.sanitizeStatus(input.status),
+      modules: this.sanitizeModules(input.modules),
     });
 
     const created = await this.repository.findBySlug(slug);
@@ -66,14 +69,26 @@ export class ProjectService {
 
   async updateProject(
     id: string,
-    changes: { name?: string; slug?: string; description?: string; status?: string },
+    changes: {
+      name?: string;
+      slug?: string;
+      description?: string;
+      status?: string;
+      modules?: Partial<ProjectModules>;
+    },
   ) {
     const project = await this.repository.findById(id);
     if (!project) {
       throw new Error('Project not found');
     }
 
-    const patch: { name?: string; slug?: string; description?: string; status?: string } = {};
+    const patch: {
+      name?: string;
+      slug?: string;
+      description?: string;
+      status?: string;
+      modules?: ProjectModules;
+    } = {};
 
     if (changes.name !== undefined) {
       const name = changes.name.trim();
@@ -104,6 +119,10 @@ export class ProjectService {
       patch.status = this.sanitizeStatus(changes.status);
     }
 
+    if (changes.modules !== undefined) {
+      patch.modules = this.sanitizeModules({ ...project.modules, ...changes.modules });
+    }
+
     await this.repository.update(id, patch);
 
     const updated = await this.repository.findById(id);
@@ -134,4 +153,12 @@ export class ProjectService {
   private sanitizeStatus(status?: string): ProjectStatusValue {
     return status === 'inactive' ? 'inactive' : 'active';
   }
+
+  private sanitizeModules(modules?: Partial<ProjectModules>): ProjectModules {
+    return {
+      vault: modules?.vault ?? DEFAULT_PROJECT_MODULES.vault,
+      openreport: modules?.openreport ?? DEFAULT_PROJECT_MODULES.openreport,
+      stateiac: modules?.stateiac ?? DEFAULT_PROJECT_MODULES.stateiac,
+    };
+  }
 }
diff --git a/src/modules/projects/domain/project.domain.ts b/src/modules/projects/domain/project.domain.ts
index 32f479f..f4d927d 100644
--- a/src/modules/projects/domain/project.domain.ts
+++ b/src/modules/projects/domain/project.domain.ts
@@ -1,35 +1,47 @@
-
-
 import { Domain } from '$lib/server/domain/domain';
 
 export interface ProjectStatus {
-    ACTIVE: 'active';
-    INACTIVE: 'inactive';
+  ACTIVE: 'active';
+  INACTIVE: 'inactive';
+}
+
+export interface ProjectModules {
+  vault: boolean;
+  openreport: boolean;
+  stateiac: boolean;
 }
 
+export const DEFAULT_PROJECT_MODULES: ProjectModules = {
+  vault: true,
+  openreport: true,
+  stateiac: true,
+};
+
 export class ProjectDomain extends Domain {
-    public name: string = ''
-    public slug: string | null = null
-    public description?: string | null = null
-    public status: ProjectStatus[keyof ProjectStatus] = 'active'
-    constructor(data: any) {
-        super(data);
-        this.name = data.name
-        this.slug = data.slug
-        this.description = data.description
-        this.status = data.status
-        
-    }
+  public name: string = '';
+  public slug: string | null = null;
+  public description?: string | null = null;
+  public status: ProjectStatus[keyof ProjectStatus] = 'active';
+  public modules: ProjectModules = { ...DEFAULT_PROJECT_MODULES };
+  constructor(data: any) {
+    super(data);
+    this.name = data.name;
+    this.slug = data.slug;
+    this.description = data.description;
+    this.status = data.status;
+    this.modules = { ...DEFAULT_PROJECT_MODULES, ...(data.modules ?? {}) };
+  }
 
-    toJson() {
-        return {
-            id: this.id,
-            name: this.name,
-            slug: this.slug,
-            description: this.description,
-            createdAt: this.createdAt,
-            status: this.status,
-            updatedAt: this.updatedAt
-        }
-    }
-}
\ No newline at end of file
+  toJson() {
+    return {
+      id: this.id,
+      name: this.name,
+      slug: this.slug,
+      description: this.description,
+      createdAt: this.createdAt,
+      status: this.status,
+      modules: this.modules,
+      updatedAt: this.updatedAt,
+    };
+  }
+}
diff --git a/src/modules/projects/infrastructure/repositories/project.repostitory.ts b/src/modules/projects/infrastructure/repositories/project.repostitory.ts
index 833b0ad..c80539e 100644
--- a/src/modules/projects/infrastructure/repositories/project.repostitory.ts
+++ b/src/modules/projects/infrastructure/repositories/project.repostitory.ts
@@ -1,13 +1,11 @@
-
 import { Repository } from '$lib/server/infra/repository';
-import { ProjectDomain } from '../../domain/project.domain';
+import { ProjectDomain, type ProjectModules } from '../../domain/project.domain';
 import { ProjectEntity } from '$lib/database/schemas';
 
 export class ProjectRepository extends Repository {
-
   async findByName(name: string): Promise<ProjectDomain | null> {
     const role = await this.db.select().from(ProjectEntity).where({ name }).limit(1);
-    return role.rows[0]  ? new ProjectDomain(role.rows[0]) : null;
+    return role.rows[0] ? new ProjectDomain(role.rows[0]) : null;
   }
 
   async findAll(): Promise<ProjectDomain[]> {
@@ -27,19 +25,36 @@ export class ProjectRepository extends Repository {
     return row ? new ProjectDomain(row) : null;
   }
 
-  async create(input: { id: string; slug: string; name: string; description?: string, status: string }): Promise<void> {
+  async create(input: {
+    id: string;
+    slug: string;
+    name: string;
+    description?: string;
+    status: string;
+    modules: ProjectModules;
+  }): Promise<void> {
     await this.db.insert(ProjectEntity).values({
       id: input.id,
       slug: input.slug,
       name: input.name,
       description: input.description,
       status: input.status,
+      modules: input.modules,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
     });
   }
 
-  async update(id: string, changes: { name?: string; slug?: string; description?: string; status?: string }): Promise<void> {
+  async update(
+    id: string,
+    changes: {
+      name?: string;
+      slug?: string;
+      description?: string;
+      status?: string;
+      modules?: ProjectModules;
+    },
+  ): Promise<void> {
     await this.db
       .update(ProjectEntity)
       .set({ ...changes, updatedAt: new Date().toISOString() })
@@ -50,4 +65,4 @@ export class ProjectRepository extends Repository {
     // TODO: Aqui deberemos borrar roles, usuarios y demás entidades relacionadas con el proyecto antes de borrarlo
     await this.db.delete(ProjectEntity).where({ id });
   }
-}
\ No newline at end of file
+}
diff --git a/src/routes/api/projects/+server.ts b/src/routes/api/projects/+server.ts
index 6fb71d1..7ca2ebb 100644
--- a/src/routes/api/projects/+server.ts
+++ b/src/routes/api/projects/+server.ts
@@ -27,6 +27,7 @@ export async function POST({ request, locals }) {
       slug?: string;
       description?: string;
       status?: string;
+      modules?: { vault?: boolean; openreport?: boolean; stateiac?: boolean };
     };
 
     const project = await projectService.createProject({
@@ -34,6 +35,7 @@ export async function POST({ request, locals }) {
       slug: data.slug ? String(data.slug) : undefined,
       description: data.description ? String(data.description) : undefined,
       status: data.status ? String(data.status) : undefined,
+      modules: data.modules,
     });
 
     return json({ success: true, project });
diff --git a/src/routes/api/projects/[id]/+server.ts b/src/routes/api/projects/[id]/+server.ts
index 7db04b0..f76ca96 100644
--- a/src/routes/api/projects/[id]/+server.ts
+++ b/src/routes/api/projects/[id]/+server.ts
@@ -27,6 +27,7 @@ export async function PATCH({ request, params, locals }) {
       slug?: string;
       description?: string;
       status?: string;
+      modules?: { vault?: boolean; openreport?: boolean; stateiac?: boolean };
     };
 
     const project = await projectService.updateProject(params.id, {
@@ -34,6 +35,7 @@ export async function PATCH({ request, params, locals }) {
       slug: data.slug,
       description: data.description,
       status: data.status,
+      modules: data.modules,
     });
 
     return json({ success: true, project });
diff --git a/src/routes/api/projects/sync/+server.ts b/src/routes/api/projects/sync/+server.ts
index 402fd62..34b8b1d 100644
--- a/src/routes/api/projects/sync/+server.ts
+++ b/src/routes/api/projects/sync/+server.ts
@@ -14,7 +14,8 @@ export async function POST({ cookies, locals }) {
     if (!backends.length) throw new Error('No storage configured');
 
     const activeId = cookies.get('active_backend') || backends[0].id;
-    const config = storageBackendService.getById(activeId) || storageBackendService.getById(backends[0].id);
+    const config =
+      storageBackendService.getById(activeId) || storageBackendService.getById(backends[0].id);
 
     if (!config) throw new Error('No storage configured');
 
diff --git a/src/routes/org/[org]/projects/[slug]/+page.svelte b/src/routes/org/[org]/projects/[slug]/+page.svelte
index e4d0795..99a841f 100644
--- a/src/routes/org/[org]/projects/[slug]/+page.svelte
+++ b/src/routes/org/[org]/projects/[slug]/+page.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import { CheckCircle, Save, Trash2 } from 'lucide-svelte';
+  import { BarChart3, CheckCircle, GitBranch, Save, Shield, Trash2 } from 'lucide-svelte';
+
+  type ProjectModules = {
+    vault: boolean;
+    openreport: boolean;
+    stateiac: boolean;
+  };
 
   type ProjectRow = {
     id: string;
@@ -9,6 +15,7 @@
     slug: string;
     description?: string | null;
     status: 'active' | 'inactive';
+    modules: ProjectModules;
     createdAt: string;
     updatedAt: string;
   };
@@ -26,6 +33,13 @@
   let editSlug = project.slug;
   let editDescription = project.description ?? '';
   let editStatus: 'active' | 'inactive' = project.status;
+  let editModules: ProjectModules = { ...project.modules };
+
+  const moduleOptions: { key: keyof ProjectModules; label: string; icon: typeof Shield }[] = [
+    { key: 'vault', label: 'Vault', icon: Shield },
+    { key: 'openreport', label: 'Open Report', icon: BarChart3 },
+    { key: 'stateiac', label: 'State IaC', icon: GitBranch },
+  ];
 
   let deleteModalOpen = false;
   let deleteLoading = false;
@@ -54,6 +68,7 @@
           slug: editSlug.trim(),
           description: editDescription.trim(),
           status: editStatus,
+          modules: editModules,
         }),
       });
 
@@ -61,6 +76,7 @@
       if (payload.error) throw new Error(payload.error);
 
       project = payload.project;
+      editModules = { ...project.modules };
       flashSuccess('Project updated.');
 
       if (payload.project.slug !== project.slug) {
@@ -200,6 +216,31 @@
       </div>
     </div>
 
+    <div class="border-t border-slate-200 px-4 py-4">
+      <p class="text-sm font-medium text-slate-700">Modules</p>
+      <p class="mt-1 text-xs text-slate-500">
+        Activa o desactiva los módulos disponibles para este proyecto.
+      </p>
+
+      <div class="mt-3 grid gap-3 sm:grid-cols-3">
+        {#each moduleOptions as option (option.key)}
+          <label
+            class="flex items-center justify-between gap-3 rounded-md border border-slate-200 px-3 py-2.5"
+          >
+            <span class="flex items-center gap-2 text-sm font-medium text-slate-700">
+              <svelte:component this={option.icon} class="h-4 w-4 text-slate-500" />
+              {option.label}
+            </span>
+            <input
+              type="checkbox"
+              bind:checked={editModules[option.key]}
+              class="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400"
+            />
+          </label>
+        {/each}
+      </div>
+    </div>
+
     <div class="flex items-center justify-end gap-2 border-t border-slate-200 px-4 py-3">
       <button
         type="button"

From 3dbc0e78513a97ac2b13d295b459decdc5b40d62 Mon Sep 17 00:00:00 2001
From: Carlos Lopez <carlos@kettu.studio>
Date: Thu, 20 Aug 2026 20:32:06 +0200
Subject: [PATCH 11/16] overview project

---
 src/lib/components/AppSidebar.svelte          |  14 +-
 .../org/[org]/projects/[slug]/+layout.svelte  |  80 ++----
 .../org/[org]/projects/[slug]/+page.server.ts |   5 +
 .../projects/[slug]/overview/+page.svelte     | 209 +++++++++++---
 .../[slug]/{ => settings}/audit/+page.svelte  |   0
 .../{ => settings/overview}/+page.svelte      | 255 +++++++++++++++---
 .../roles-permissions/+page.svelte            |   0
 .../{ => settings}/users-groups/+page.svelte  |   0
 src/routes/settings/projects/+page.svelte     |   2 +-
 9 files changed, 420 insertions(+), 145 deletions(-)
 create mode 100644 src/routes/org/[org]/projects/[slug]/+page.server.ts
 rename src/routes/org/[org]/projects/[slug]/{ => settings}/audit/+page.svelte (100%)
 rename src/routes/org/[org]/projects/[slug]/{ => settings/overview}/+page.svelte (50%)
 rename src/routes/org/[org]/projects/[slug]/{ => settings}/roles-permissions/+page.svelte (100%)
 rename src/routes/org/[org]/projects/[slug]/{ => settings}/users-groups/+page.svelte (100%)

diff --git a/src/lib/components/AppSidebar.svelte b/src/lib/components/AppSidebar.svelte
index b4e9344..abcf3dd 100644
--- a/src/lib/components/AppSidebar.svelte
+++ b/src/lib/components/AppSidebar.svelte
@@ -126,31 +126,29 @@
     ? [
         {
           label: 'Información',
-          href: `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/overview`,
+          href: `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/settings/overview`,
           icon: Info,
         },
         {
           label: 'Users and Groups',
-          href: `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/users-groups`,
+          href: `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/settings/users-groups`,
           icon: Users,
         },
         {
           label: 'Roles and Permissions',
-          href: `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/roles-permissions`,
+          href: `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/settings/roles-permissions`,
           icon: Shield,
         },
         {
           label: 'Audit',
-          href: `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/audit`,
+          href: `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/settings/audit`,
           icon: ScrollText,
         },
       ]
     : [];
 
   function isProjectSettingsItemActive(href: string) {
-    return href === `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}`
-      ? currentPath === href
-      : currentPath.startsWith(href);
+    return currentPath.startsWith(href);
   }
 
   function getPulumiStateActiveItem() {
@@ -354,7 +352,7 @@
 
         {#if collapsed}
           <a
-            href={`/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}`}
+            href={`/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/settings/overview`}
             class="group flex items-center justify-center rounded-md border px-3 py-2.5 transition-colors border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"
             title="Project Settings"
           >
diff --git a/src/routes/org/[org]/projects/[slug]/+layout.svelte b/src/routes/org/[org]/projects/[slug]/+layout.svelte
index fd247a9..edb720b 100644
--- a/src/routes/org/[org]/projects/[slug]/+layout.svelte
+++ b/src/routes/org/[org]/projects/[slug]/+layout.svelte
@@ -1,85 +1,63 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import {
-    ArrowLeft,
-    FolderKanban,
-    Info,
-    LayoutDashboard,
-    ScrollText,
-    Shield,
-    Users,
-  } from 'lucide-svelte';
+  import { ChevronRight, Info, LayoutDashboard, ScrollText, Shield, Users } from 'lucide-svelte';
 
   export let data: { project: { id: string; name: string; slug: string } };
 
   $: project = data.project;
   $: orgSlug = $page.params.org;
 
+  $: overviewHref = `/org/${orgSlug}/projects/${project.slug}/overview`;
+
   $: tabs = [
     {
       label: 'Overview',
-      href: `/org/${orgSlug}/projects/${project.slug}/overview`,
+      href: overviewHref,
       icon: LayoutDashboard,
+      subtitle: 'Resumen general del proyecto.',
+    },
+    {
+      label: 'Información',
+      href: `/org/${orgSlug}/projects/${project.slug}/settings/overview`,
+      icon: Info,
+      subtitle: 'Datos generales, módulos y zona de peligro del proyecto.',
     },
-    { label: 'Información', href: `/org/${orgSlug}/projects/${project.slug}`, icon: Info },
     {
       label: 'Usuarios y Grupos',
-      href: `/org/${orgSlug}/projects/${project.slug}/users-groups`,
+      href: `/org/${orgSlug}/projects/${project.slug}/settings/users-groups`,
       icon: Users,
+      subtitle: 'Gestiona qué usuarios y grupos tienen acceso a este proyecto.',
     },
     {
       label: 'Roles y Permisos',
-      href: `/org/${orgSlug}/projects/${project.slug}/roles-permissions`,
+      href: `/org/${orgSlug}/projects/${project.slug}/settings/roles-permissions`,
       icon: Shield,
+      subtitle: 'Define roles y permisos específicos para este proyecto.',
     },
     {
       label: 'Auditoría',
-      href: `/org/${orgSlug}/projects/${project.slug}/audit`,
+      href: `/org/${orgSlug}/projects/${project.slug}/settings/audit`,
       icon: ScrollText,
+      subtitle: 'Historial de cambios y actividad relevante del proyecto.',
     },
   ];
 
   $: currentPath = $page.url.pathname;
-
-  function isTabActive(href: string) {
-    return currentPath === href;
-  }
+  $: currentTab = tabs.find((tab) => tab.href === currentPath) ?? tabs[0];
 </script>
 
-<div class="mx-auto w-full max-w-7xl">
-  <div class="min-h-130 overflow-hidden border border-slate-200 bg-white shadow-sm sm:rounded-2xl">
-    <div class="border-b border-slate-200 px-6 py-4 sm:px-8">
-      <a
-        href={`/org/${orgSlug}/overview`}
-        class="inline-flex items-center gap-1.5 text-sm text-slate-600 hover:text-slate-900"
-      >
-        <ArrowLeft class="h-4 w-4" />
-        Back to projects
+<div class="mx-auto w-full max-w-7xl space-y-4">
+  <div class="w-full rounded-md border border-slate-200 bg-white px-6 py-4 shadow-sm sm:px-8">
+    <div class="flex items-center gap-1.5 text-sm">
+      <a href={overviewHref} class="font-medium text-slate-900 hover:underline">
+        {project.name}
       </a>
-
-      <div class="mt-3 flex items-center gap-2">
-        <FolderKanban class="h-5 w-5 text-slate-900" />
-        <h2 class="text-lg font-semibold text-slate-900">{project.name}</h2>
-      </div>
-
-      <nav class="mt-4 flex flex-wrap gap-2">
-        {#each tabs as tab}
-          <a
-            href={tab.href}
-            class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors {isTabActive(
-              tab.href,
-            )
-              ? 'bg-slate-900 text-white'
-              : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'}"
-          >
-            <svelte:component this={tab.icon} class="h-3.5 w-3.5" />
-            {tab.label}
-          </a>
-        {/each}
-      </nav>
-    </div>
-    <div class="p-6 sm:p-8">
-      <slot />
+      <ChevronRight class="h-3.5 w-3.5 shrink-0 text-slate-400" />
+      <span class="text-slate-600">{currentTab.label}</span>
     </div>
+
+    <p class="mt-1 text-sm text-slate-500">{currentTab.subtitle}</p>
   </div>
+
+  <slot />
 </div>
diff --git a/src/routes/org/[org]/projects/[slug]/+page.server.ts b/src/routes/org/[org]/projects/[slug]/+page.server.ts
new file mode 100644
index 0000000..a4cc12a
--- /dev/null
+++ b/src/routes/org/[org]/projects/[slug]/+page.server.ts
@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+
+export function load({ params }) {
+  throw redirect(302, `/org/${params.org}/projects/${params.slug}/settings/overview`);
+}
diff --git a/src/routes/org/[org]/projects/[slug]/overview/+page.svelte b/src/routes/org/[org]/projects/[slug]/overview/+page.svelte
index df1ec26..8e87308 100644
--- a/src/routes/org/[org]/projects/[slug]/overview/+page.svelte
+++ b/src/routes/org/[org]/projects/[slug]/overview/+page.svelte
@@ -1,5 +1,19 @@
 <script lang="ts">
-  import { FolderKanban } from 'lucide-svelte';
+  import {
+    ArrowRight,
+    BarChart3,
+    FolderKanban,
+    GitBranch,
+    KeyRound,
+    Shield,
+    UserPlus,
+  } from 'lucide-svelte';
+
+  type ProjectModules = {
+    vault: boolean;
+    openreport: boolean;
+    stateiac: boolean;
+  };
 
   type ProjectRow = {
     id: string;
@@ -7,22 +21,57 @@
     slug: string;
     description?: string | null;
     status: 'active' | 'inactive';
-    createdAt: string;
-    updatedAt: string;
+    modules: ProjectModules;
   };
 
   export let data: { project: ProjectRow };
 
   $: project = data.project;
 
-  function formatDate(value?: string) {
-    if (!value) return '-';
-    try {
-      return new Date(value).toLocaleString();
-    } catch {
-      return value;
-    }
-  }
+  const moduleInfo: {
+    key: keyof ProjectModules;
+    label: string;
+    description: string;
+    href: string;
+    icon: typeof Shield;
+  }[] = [
+    {
+      key: 'vault',
+      label: 'Vault',
+      description: 'Secretos, credenciales y controles de acceso.',
+      href: '/vault',
+      icon: Shield,
+    },
+    {
+      key: 'openreport',
+      label: 'Open Report',
+      description: 'Reportes de vulnerabilidades y dependencias.',
+      href: '/open-report',
+      icon: BarChart3,
+    },
+    {
+      key: 'stateiac',
+      label: 'State IaC',
+      description: 'Estado y backends de Pulumi.',
+      href: '/how-to',
+      icon: GitBranch,
+    },
+  ];
+
+  $: activeModules = moduleInfo.filter((module) => project.modules[module.key]);
+
+  const quickActions = [
+    {
+      label: 'Invite members',
+      description: 'Invita usuarios a colaborar en este proyecto.',
+      icon: UserPlus,
+    },
+    {
+      label: 'Add Secret Token',
+      description: 'Genera un token para integraciones y CI/CD.',
+      icon: KeyRound,
+    },
+  ];
 </script>
 
 <svelte:head>
@@ -31,43 +80,121 @@
 
 <div class="space-y-6">
   <section class="overflow-hidden rounded-md border border-slate-200 bg-white">
-    <div class="flex items-center gap-3 border-b border-slate-200 px-4 py-4">
-      <FolderKanban class="h-5 w-5 text-slate-900" />
-      <div>
-        <h3 class="text-lg font-semibold text-slate-900">{project.name}</h3>
-        <p class="text-xs text-slate-500">Slug: {project.slug}</p>
+    <div class="flex items-start justify-between gap-3 border-b border-slate-200 px-4 py-4">
+      <div class="flex items-center gap-3">
+        <FolderKanban class="h-5 w-5 text-slate-900" />
+        <div>
+          <h3 class="text-lg font-semibold text-slate-900">{project.name}</h3>
+          <p class="text-xs text-slate-500">Slug: {project.slug}</p>
+        </div>
       </div>
+
+      <span
+        class="inline-flex shrink-0 items-center rounded-full px-2.5 py-0.5 text-xs font-medium {project.status ===
+        'active'
+          ? 'bg-emerald-50 text-emerald-700'
+          : 'bg-slate-100 text-slate-600'}"
+      >
+        {project.status === 'active' ? 'Active' : 'Inactive'}
+      </span>
     </div>
 
-    <dl class="grid gap-4 px-4 py-4 sm:grid-cols-2">
-      <div>
-        <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Estado</dt>
-        <dd class="mt-1">
-          <span
-            class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {project.status ===
-            'active'
-              ? 'bg-emerald-50 text-emerald-700'
-              : 'bg-slate-100 text-slate-600'}"
+    <div class="px-4 py-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-slate-500">Descripción</p>
+      <p class="mt-1 text-sm text-slate-700">{project.description || 'Sin descripción.'}</p>
+    </div>
+  </section>
+
+  <section>
+    <h3 class="text-sm font-semibold text-slate-900">Módulos activos</h3>
+
+    {#if activeModules.length === 0}
+      <div
+        class="mt-3 rounded-md border border-dashed border-slate-300 bg-slate-50 px-6 py-10 text-center text-sm text-slate-600"
+      >
+        Este proyecto no tiene módulos activos. Actívalos desde la configuración del proyecto.
+      </div>
+    {:else}
+      <div class="mt-3 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {#each activeModules as module (module.key)}
+          <a
+            href={module.href}
+            class="group flex items-start gap-3 rounded-md border border-slate-200 bg-white p-4 shadow-sm transition-colors hover:border-slate-300 hover:shadow-md"
           >
-            {project.status === 'active' ? 'Active' : 'Inactive'}
-          </span>
-        </dd>
+            <div
+              class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-700"
+            >
+              <svelte:component this={module.icon} class="h-4 w-4" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <p class="text-sm font-semibold text-slate-900">{module.label}</p>
+              <p class="mt-1 text-xs leading-5 text-slate-600">{module.description}</p>
+            </div>
+            <ArrowRight
+              class="h-4 w-4 shrink-0 text-slate-400 transition-transform group-hover:translate-x-1 group-hover:text-slate-900"
+            />
+          </a>
+        {/each}
       </div>
+    {/if}
+  </section>
 
-      <div>
-        <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Descripción</dt>
-        <dd class="mt-1 text-sm text-slate-700">{project.description || 'Sin descripción.'}</dd>
-      </div>
+  <section>
+    <h3 class="text-sm font-semibold text-slate-900">Guías</h3>
+    <p class="mt-1 text-xs text-slate-500">Aprende a sacarle partido a cada módulo.</p>
 
-      <div>
-        <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Creado</dt>
-        <dd class="mt-1 text-sm text-slate-700">{formatDate(project.createdAt)}</dd>
-      </div>
+    <div class="mt-3 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {#each moduleInfo as module (module.key)}
+        <a
+          href={module.href}
+          class="group flex items-start gap-3 rounded-md border border-slate-200 bg-white p-4 shadow-sm transition-colors hover:border-slate-300 hover:shadow-md"
+        >
+          <div
+            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-700"
+          >
+            <svelte:component this={module.icon} class="h-4 w-4" />
+          </div>
+          <div class="min-w-0 flex-1">
+            <p class="text-sm font-semibold text-slate-900">Guía de {module.label}</p>
+            <p class="mt-1 text-xs leading-5 text-slate-600">{module.description}</p>
+          </div>
+          <ArrowRight
+            class="h-4 w-4 shrink-0 text-slate-400 transition-transform group-hover:translate-x-1 group-hover:text-slate-900"
+          />
+        </a>
+      {/each}
+    </div>
+  </section>
 
-      <div>
-        <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Actualizado</dt>
-        <dd class="mt-1 text-sm text-slate-700">{formatDate(project.updatedAt)}</dd>
-      </div>
-    </dl>
+  <section>
+    <h3 class="text-sm font-semibold text-slate-900">Acceso rápido</h3>
+
+    <div class="mt-3 grid gap-4 sm:grid-cols-2">
+      {#each quickActions as action (action.label)}
+        <button
+          type="button"
+          disabled
+          title="Próximamente"
+          class="flex items-start gap-3 rounded-md border border-dashed border-slate-300 bg-slate-50 p-4 text-left opacity-75"
+        >
+          <div
+            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-600"
+          >
+            <svelte:component this={action.icon} class="h-4 w-4" />
+          </div>
+          <div class="min-w-0">
+            <div class="flex items-center gap-2">
+              <p class="text-sm font-semibold text-slate-900">{action.label}</p>
+              <span
+                class="inline-flex items-center rounded-full bg-slate-200 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-slate-600"
+              >
+                Próximamente
+              </span>
+            </div>
+            <p class="mt-1 text-xs leading-5 text-slate-600">{action.description}</p>
+          </div>
+        </button>
+      {/each}
+    </div>
   </section>
 </div>
diff --git a/src/routes/org/[org]/projects/[slug]/audit/+page.svelte b/src/routes/org/[org]/projects/[slug]/settings/audit/+page.svelte
similarity index 100%
rename from src/routes/org/[org]/projects/[slug]/audit/+page.svelte
rename to src/routes/org/[org]/projects/[slug]/settings/audit/+page.svelte
diff --git a/src/routes/org/[org]/projects/[slug]/+page.svelte b/src/routes/org/[org]/projects/[slug]/settings/overview/+page.svelte
similarity index 50%
rename from src/routes/org/[org]/projects/[slug]/+page.svelte
rename to src/routes/org/[org]/projects/[slug]/settings/overview/+page.svelte
index 99a841f..194f8f9 100644
--- a/src/routes/org/[org]/projects/[slug]/+page.svelte
+++ b/src/routes/org/[org]/projects/[slug]/settings/overview/+page.svelte
@@ -1,7 +1,17 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import { BarChart3, CheckCircle, GitBranch, Save, Shield, Trash2 } from 'lucide-svelte';
+  import {
+    Archive,
+    BarChart3,
+    Building2,
+    CheckCircle,
+    Copy,
+    GitBranch,
+    Save,
+    Shield,
+    Trash2,
+  } from 'lucide-svelte';
 
   type ProjectModules = {
     vault: boolean;
@@ -28,12 +38,12 @@
   let saving = false;
   let error = '';
   let success = '';
+  let slugCopied = false;
 
-  let editName = project.name;
-  let editSlug = project.slug;
-  let editDescription = project.description ?? '';
-  let editStatus: 'active' | 'inactive' = project.status;
-  let editModules: ProjectModules = { ...project.modules };
+  let editName = data.project.name;
+  let editSlug = data.project.slug;
+  let editDescription = data.project.description ?? '';
+  let editModules: ProjectModules = { ...data.project.modules };
 
   const moduleOptions: { key: keyof ProjectModules; label: string; icon: typeof Shield }[] = [
     { key: 'vault', label: 'Vault', icon: Shield },
@@ -43,6 +53,8 @@
 
   let deleteModalOpen = false;
   let deleteLoading = false;
+  let archiveModalOpen = false;
+  let archiveLoading = false;
 
   function flashSuccess(message: string) {
     success = message;
@@ -51,6 +63,22 @@
     }, 2500);
   }
 
+  function toggleModule(key: keyof ProjectModules) {
+    editModules = { ...editModules, [key]: !editModules[key] };
+  }
+
+  async function copySlug() {
+    try {
+      await navigator.clipboard.writeText(project.slug);
+      slugCopied = true;
+      setTimeout(() => {
+        slugCopied = false;
+      }, 2000);
+    } catch {
+      error = 'Failed to copy slug.';
+    }
+  }
+
   async function saveProject() {
     error = '';
     if (!editName.trim()) {
@@ -67,7 +95,6 @@
           name: editName.trim(),
           slug: editSlug.trim(),
           description: editDescription.trim(),
-          status: editStatus,
           modules: editModules,
         }),
       });
@@ -80,7 +107,9 @@
       flashSuccess('Project updated.');
 
       if (payload.project.slug !== project.slug) {
-        await goto(`/org/${orgSlug}/projects/${payload.project.slug}`, { invalidateAll: true });
+        await goto(`/org/${orgSlug}/projects/${payload.project.slug}/settings/overview`, {
+          invalidateAll: true,
+        });
       }
     } catch (err: unknown) {
       error = err instanceof Error ? err.message : 'Failed to update project.';
@@ -89,6 +118,39 @@
     }
   }
 
+  function openArchiveModal() {
+    error = '';
+    archiveModalOpen = true;
+  }
+
+  function closeArchiveModal() {
+    archiveModalOpen = false;
+  }
+
+  async function confirmArchive() {
+    error = '';
+    archiveLoading = true;
+
+    try {
+      const res = await fetch(`/api/projects/${project.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: 'inactive' }),
+      });
+
+      const payload = await res.json();
+      if (payload.error) throw new Error(payload.error);
+
+      project = payload.project;
+      closeArchiveModal();
+      flashSuccess('Project archived.');
+    } catch (err: unknown) {
+      error = err instanceof Error ? err.message : 'Failed to archive project.';
+    } finally {
+      archiveLoading = false;
+    }
+  }
+
   function openDeleteModal() {
     error = '';
     deleteModalOpen = true;
@@ -125,7 +187,7 @@
 </script>
 
 <svelte:head>
-  <title>Información - {project.name}</title>
+  <title>Configuración - {project.name}</title>
 </svelte:head>
 
 <div class="space-y-6">
@@ -147,17 +209,15 @@
     <div
       class="flex flex-col gap-3 border-b border-slate-200 px-4 py-4 sm:flex-row sm:items-center sm:justify-between"
     >
-      <p class="text-xs text-slate-500">
-        Created {formatDate(project.createdAt)} · Updated {formatDate(project.updatedAt)}
-      </p>
+      <p class="text-xs text-slate-500">Fecha de creación: {formatDate(project.createdAt)}</p>
 
       <button
         type="button"
-        on:click={openDeleteModal}
-        class="btn-danger inline-flex items-center gap-1.5 rounded-md px-2.5 py-2 text-xs font-medium"
+        on:click={copySlug}
+        class="btn-secondary inline-flex items-center gap-1.5 rounded-md px-2.5 py-2 text-xs font-medium"
       >
-        <Trash2 class="h-3.5 w-3.5" />
-        Delete project
+        <Copy class="h-3.5 w-3.5" />
+        {slugCopied ? 'Slug copiado' : 'Copy Project Slug'}
       </button>
     </div>
 
@@ -165,7 +225,7 @@
       <div class="grid gap-4 sm:grid-cols-2">
         <div>
           <label class="block text-sm font-medium text-slate-700" for="edit-project-name"
-            >Name</label
+            >Nombre</label
           >
           <input
             id="edit-project-name"
@@ -190,7 +250,7 @@
 
       <div>
         <label class="block text-sm font-medium text-slate-700" for="edit-project-description">
-          Description
+          Descripción
         </label>
         <textarea
           id="edit-project-description"
@@ -200,43 +260,48 @@
           placeholder="Optional description"
         ></textarea>
       </div>
-
-      <div class="sm:w-48">
-        <label class="block text-sm font-medium text-slate-700" for="edit-project-status"
-          >Status</label
-        >
-        <select
-          id="edit-project-status"
-          bind:value={editStatus}
-          class="field-input mt-2 w-full rounded-md border px-3 py-2 text-sm outline-none transition"
-        >
-          <option value="active">Active</option>
-          <option value="inactive">Inactive</option>
-        </select>
-      </div>
     </div>
 
     <div class="border-t border-slate-200 px-4 py-4">
       <p class="text-sm font-medium text-slate-700">Modules</p>
       <p class="mt-1 text-xs text-slate-500">
-        Activa o desactiva los módulos disponibles para este proyecto.
+        Pulsa en una card para activar o desactivar el módulo.
       </p>
 
       <div class="mt-3 grid gap-3 sm:grid-cols-3">
         {#each moduleOptions as option (option.key)}
-          <label
-            class="flex items-center justify-between gap-3 rounded-md border border-slate-200 px-3 py-2.5"
+          <button
+            type="button"
+            on:click={() => toggleModule(option.key)}
+            class="flex flex-col gap-3 rounded-md border px-4 py-3 text-left transition-colors {editModules[
+              option.key
+            ]
+              ? 'border-slate-200 bg-white'
+              : 'border-slate-200 bg-slate-100 text-slate-400'}"
           >
-            <span class="flex items-center gap-2 text-sm font-medium text-slate-700">
-              <svelte:component this={option.icon} class="h-4 w-4 text-slate-500" />
-              {option.label}
+            <div class="flex items-center justify-between">
+              <span
+                class="flex items-center gap-2 text-sm font-medium {editModules[option.key]
+                  ? 'text-slate-900'
+                  : 'text-slate-500'}"
+              >
+                <svelte:component
+                  this={option.icon}
+                  class="h-4 w-4 {editModules[option.key] ? 'text-slate-500' : 'text-slate-400'}"
+                />
+                {option.label}
+              </span>
+            </div>
+            <span
+              class="inline-flex w-fit items-center rounded-full px-2.5 py-0.5 text-xs font-medium {editModules[
+                option.key
+              ]
+                ? 'bg-emerald-50 text-emerald-700'
+                : 'bg-slate-200 text-slate-500'}"
+            >
+              {editModules[option.key] ? 'Activo' : 'Desactivado'}
             </span>
-            <input
-              type="checkbox"
-              bind:checked={editModules[option.key]}
-              class="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400"
-            />
-          </label>
+          </button>
         {/each}
       </div>
     </div>
@@ -253,8 +318,110 @@
       </button>
     </div>
   </section>
+
+  <section class="overflow-hidden rounded-md border border-red-200 bg-white">
+    <div class="border-b border-red-200 bg-red-50 px-4 py-3">
+      <h3 class="text-sm font-semibold text-red-800">Danger Zone</h3>
+    </div>
+
+    <div class="divide-y divide-slate-100">
+      <div class="flex items-center justify-between gap-4 px-4 py-4">
+        <div>
+          <p class="text-sm font-medium text-slate-900">Transferir a organización</p>
+          <p class="mt-1 text-xs text-slate-500">Mueve este proyecto a otra organización.</p>
+        </div>
+        <button
+          type="button"
+          disabled
+          title="Próximamente"
+          class="btn-secondary inline-flex shrink-0 items-center gap-1.5 rounded-md px-2.5 py-2 text-xs font-medium opacity-50"
+        >
+          <Building2 class="h-3.5 w-3.5" />
+          Transferir
+        </button>
+      </div>
+
+      <div class="flex items-center justify-between gap-4 px-4 py-4">
+        <div>
+          <p class="text-sm font-medium text-slate-900">Archivar proyecto</p>
+          <p class="mt-1 text-xs text-slate-500">
+            El proyecto pasará a estado inactivo y dejará de listarse como activo.
+          </p>
+        </div>
+        <button
+          type="button"
+          on:click={openArchiveModal}
+          class="btn-secondary inline-flex shrink-0 items-center gap-1.5 rounded-md px-2.5 py-2 text-xs font-medium"
+        >
+          <Archive class="h-3.5 w-3.5" />
+          Archivar
+        </button>
+      </div>
+
+      <div class="flex items-center justify-between gap-4 px-4 py-4">
+        <div>
+          <p class="text-sm font-medium text-slate-900">Delete project</p>
+          <p class="mt-1 text-xs text-slate-500">Esta acción no se puede deshacer.</p>
+        </div>
+        <button
+          type="button"
+          on:click={openDeleteModal}
+          class="btn-danger inline-flex shrink-0 items-center gap-1.5 rounded-md px-2.5 py-2 text-xs font-medium"
+        >
+          <Trash2 class="h-3.5 w-3.5" />
+          Delete
+        </button>
+      </div>
+    </div>
+  </section>
 </div>
 
+{#if archiveModalOpen}
+  <button
+    type="button"
+    class="fixed inset-0 z-40 bg-slate-900/50"
+    on:click={closeArchiveModal}
+    aria-label="Close archive project modal"
+  ></button>
+  <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+    <div
+      class="w-full max-w-md rounded-md border border-slate-200 bg-white shadow-xl"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Archive project modal"
+    >
+      <div class="border-b border-slate-200 px-4 py-3">
+        <h5 class="text-sm font-semibold text-slate-900">Archive project</h5>
+      </div>
+
+      <div class="px-4 py-4 text-sm text-slate-600">
+        Are you sure you want to archive <span class="font-medium text-slate-900"
+          >{project.name}</span
+        >? It will be marked as inactive.
+      </div>
+
+      <div class="flex items-center justify-end gap-2 border-t border-slate-200 px-4 py-3">
+        <button
+          type="button"
+          on:click={closeArchiveModal}
+          class="btn-secondary rounded-md px-3 py-2 text-sm font-medium"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          on:click={confirmArchive}
+          disabled={archiveLoading}
+          class="btn-primary inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium"
+        >
+          <Archive class="h-4 w-4" />
+          {archiveLoading ? 'Archiving...' : 'Archive project'}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
+
 {#if deleteModalOpen}
   <button
     type="button"
diff --git a/src/routes/org/[org]/projects/[slug]/roles-permissions/+page.svelte b/src/routes/org/[org]/projects/[slug]/settings/roles-permissions/+page.svelte
similarity index 100%
rename from src/routes/org/[org]/projects/[slug]/roles-permissions/+page.svelte
rename to src/routes/org/[org]/projects/[slug]/settings/roles-permissions/+page.svelte
diff --git a/src/routes/org/[org]/projects/[slug]/users-groups/+page.svelte b/src/routes/org/[org]/projects/[slug]/settings/users-groups/+page.svelte
similarity index 100%
rename from src/routes/org/[org]/projects/[slug]/users-groups/+page.svelte
rename to src/routes/org/[org]/projects/[slug]/settings/users-groups/+page.svelte
diff --git a/src/routes/settings/projects/+page.svelte b/src/routes/settings/projects/+page.svelte
index 877e1ab..422fb34 100644
--- a/src/routes/settings/projects/+page.svelte
+++ b/src/routes/settings/projects/+page.svelte
@@ -267,7 +267,7 @@
                 <td class="px-4 py-3">
                   <div class="flex items-center justify-end gap-2">
                     <a
-                      href={`/org/${data.organization.slug}/projects/${project.slug}`}
+                      href={`/org/${data.organization.slug}/projects/${project.slug}/settings/overview`}
                       class="btn-secondary inline-flex items-center gap-1.5 rounded-md px-2.5 py-2 text-xs font-medium"
                       title="View project"
                     >

From cc23a053c4be0fc0a8ed44cc4f162d3423ca20de Mon Sep 17 00:00:00 2001
From: Carlos Lopez <carlos@kettu.studio>
Date: Thu, 20 Aug 2026 20:34:39 +0200
Subject: [PATCH 12/16] fix

---
 .../[slug]/settings/overview/+page.svelte     | 119 +++++++++++++-----
 1 file changed, 87 insertions(+), 32 deletions(-)

diff --git a/src/routes/org/[org]/projects/[slug]/settings/overview/+page.svelte b/src/routes/org/[org]/projects/[slug]/settings/overview/+page.svelte
index 194f8f9..a470b84 100644
--- a/src/routes/org/[org]/projects/[slug]/settings/overview/+page.svelte
+++ b/src/routes/org/[org]/projects/[slug]/settings/overview/+page.svelte
@@ -4,12 +4,15 @@
   import {
     Archive,
     BarChart3,
+    Bot,
     Building2,
     CheckCircle,
     Copy,
+    ExternalLink,
     GitBranch,
     Save,
     Shield,
+    Terminal,
     Trash2,
   } from 'lucide-svelte';
 
@@ -45,10 +48,28 @@
   let editDescription = data.project.description ?? '';
   let editModules: ProjectModules = { ...data.project.modules };
 
-  const moduleOptions: { key: keyof ProjectModules; label: string; icon: typeof Shield }[] = [
-    { key: 'vault', label: 'Vault', icon: Shield },
-    { key: 'openreport', label: 'Open Report', icon: BarChart3 },
-    { key: 'stateiac', label: 'State IaC', icon: GitBranch },
+  const moduleOptions: {
+    key: keyof ProjectModules;
+    label: string;
+    icon: typeof Shield;
+    href: string;
+  }[] = [
+    { key: 'vault', label: 'Vault', icon: Shield, href: '/vault' },
+    { key: 'openreport', label: 'Open Report', icon: BarChart3, href: '/open-report' },
+    { key: 'stateiac', label: 'State IaC', icon: GitBranch, href: '/how-to' },
+  ];
+
+  const integrationCards = [
+    {
+      label: 'GitOps CLI',
+      description: `Conecta este proyecto con gitops project use ${data.project.slug}.`,
+      icon: Terminal,
+    },
+    {
+      label: 'GitOps Bot',
+      description: 'Automatiza análisis y PRs para este proyecto.',
+      icon: Bot,
+    },
   ];
 
   let deleteModalOpen = false;
@@ -175,15 +196,6 @@
       deleteLoading = false;
     }
   }
-
-  function formatDate(value?: string) {
-    if (!value) return '-';
-    try {
-      return new Date(value).toLocaleString();
-    } catch {
-      return value;
-    }
-  }
 </script>
 
 <svelte:head>
@@ -206,11 +218,7 @@
   {/if}
 
   <section class="overflow-hidden rounded-md border border-slate-200 bg-white">
-    <div
-      class="flex flex-col gap-3 border-b border-slate-200 px-4 py-4 sm:flex-row sm:items-center sm:justify-between"
-    >
-      <p class="text-xs text-slate-500">Fecha de creación: {formatDate(project.createdAt)}</p>
-
+    <div class="flex items-center justify-end border-b border-slate-200 px-4 py-4">
       <button
         type="button"
         on:click={copySlug}
@@ -270,16 +278,18 @@
 
       <div class="mt-3 grid gap-3 sm:grid-cols-3">
         {#each moduleOptions as option (option.key)}
-          <button
-            type="button"
-            on:click={() => toggleModule(option.key)}
+          <div
             class="flex flex-col gap-3 rounded-md border px-4 py-3 text-left transition-colors {editModules[
               option.key
             ]
               ? 'border-slate-200 bg-white'
               : 'border-slate-200 bg-slate-100 text-slate-400'}"
           >
-            <div class="flex items-center justify-between">
+            <button
+              type="button"
+              on:click={() => toggleModule(option.key)}
+              class="flex items-center justify-between text-left"
+            >
               <span
                 class="flex items-center gap-2 text-sm font-medium {editModules[option.key]
                   ? 'text-slate-900'
@@ -291,17 +301,30 @@
                 />
                 {option.label}
               </span>
+            </button>
+
+            <div class="flex items-center justify-between gap-2">
+              <span
+                class="inline-flex w-fit items-center rounded-full px-2.5 py-0.5 text-xs font-medium {editModules[
+                  option.key
+                ]
+                  ? 'bg-emerald-50 text-emerald-700'
+                  : 'bg-slate-200 text-slate-500'}"
+              >
+                {editModules[option.key] ? 'Activo' : 'Desactivado'}
+              </span>
+
+              {#if editModules[option.key]}
+                <a
+                  href={option.href}
+                  class="inline-flex items-center gap-1 text-xs font-medium text-slate-600 hover:text-slate-900"
+                >
+                  Abrir
+                  <ExternalLink class="h-3 w-3" />
+                </a>
+              {/if}
             </div>
-            <span
-              class="inline-flex w-fit items-center rounded-full px-2.5 py-0.5 text-xs font-medium {editModules[
-                option.key
-              ]
-                ? 'bg-emerald-50 text-emerald-700'
-                : 'bg-slate-200 text-slate-500'}"
-            >
-              {editModules[option.key] ? 'Activo' : 'Desactivado'}
-            </span>
-          </button>
+          </div>
         {/each}
       </div>
     </div>
@@ -319,6 +342,38 @@
     </div>
   </section>
 
+  <section class="overflow-hidden rounded-md border border-slate-200 bg-white">
+    <div class="border-b border-slate-200 px-4 py-3">
+      <h3 class="text-sm font-semibold text-slate-900">Integraciones</h3>
+      <p class="mt-1 text-xs text-slate-500">Conecta este proyecto con las herramientas GitOps.</p>
+    </div>
+
+    <div class="grid gap-4 p-4 sm:grid-cols-2">
+      {#each integrationCards as card (card.label)}
+        <div
+          class="flex items-start gap-3 rounded-md border border-dashed border-slate-300 bg-slate-50 p-4 opacity-75"
+        >
+          <div
+            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-600"
+          >
+            <svelte:component this={card.icon} class="h-4 w-4" />
+          </div>
+          <div class="min-w-0">
+            <div class="flex items-center gap-2">
+              <p class="text-sm font-semibold text-slate-900">{card.label}</p>
+              <span
+                class="inline-flex items-center rounded-full bg-slate-200 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-slate-600"
+              >
+                Próximamente
+              </span>
+            </div>
+            <p class="mt-1 text-xs leading-5 text-slate-600">{card.description}</p>
+          </div>
+        </div>
+      {/each}
+    </div>
+  </section>
+
   <section class="overflow-hidden rounded-md border border-red-200 bg-white">
     <div class="border-b border-red-200 bg-red-50 px-4 py-3">
       <h3 class="text-sm font-semibold text-red-800">Danger Zone</h3>

From 58917a1ae047e8bd43d5a1404cb3f04bc63be829 Mon Sep 17 00:00:00 2001
From: Carlos Lopez <carlos@kettu.studio>
Date: Thu, 20 Aug 2026 20:54:14 +0200
Subject: [PATCH 13/16] sidebar reactivo y modulos donde toca

---
 src/hooks.server.ts                           |   2 +-
 src/lib/components/AppNavbar.svelte           |   4 +-
 src/lib/components/AppSidebar.svelte          | 222 ++++++------------
 src/routes/+layout.svelte                     |   2 +
 src/routes/how-to/+page.svelte                |  52 ----
 src/routes/login/+page.svelte                 |  37 +--
 .../org/[org]/projects/[slug]/+layout.svelte  |  29 ++-
 .../projects/[slug]/overview/+page.svelte     |  24 +-
 .../projects/[slug]/report}/+page.svelte      |   0
 .../[slug]/settings/overview/+page.svelte     |  21 +-
 .../projects/[slug]/state-iac/+page.svelte    |  69 ++++++
 .../[org]/projects/[slug]}/vault/+page.svelte |   0
 12 files changed, 226 insertions(+), 236 deletions(-)
 delete mode 100644 src/routes/how-to/+page.svelte
 rename src/routes/{open-report => org/[org]/projects/[slug]/report}/+page.svelte (100%)
 create mode 100644 src/routes/org/[org]/projects/[slug]/state-iac/+page.svelte
 rename src/routes/{ => org/[org]/projects/[slug]}/vault/+page.svelte (100%)

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 754e89c..02dcc9c 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -24,7 +24,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 
   if (event.url.pathname.startsWith('/settings') || event.url.pathname.startsWith('/api/system')) {
     if (!canAccessAdminArea(currentUser)) {
-      return new Response(null, { status: 302, headers: { location: '/vault' } });
+      return new Response(null, { status: 302, headers: { location: '/' } });
     }
   }
 
diff --git a/src/lib/components/AppNavbar.svelte b/src/lib/components/AppNavbar.svelte
index 7d13a60..0b08a16 100644
--- a/src/lib/components/AppNavbar.svelte
+++ b/src/lib/components/AppNavbar.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { page } from '$app/stores';
   import { ChevronDown, FolderKanban, LogOut, UserRound } from 'lucide-svelte';
 
   export let user: { username: string; role: string } | null = null;
   export let projects: { id: string; name: string; slug: string }[] = [];
   export let organizationSlug = 'gitops';
+  export let projectSlug = '';
 
   let showUserDropdown = false;
   let showProjectDropdown = false;
@@ -42,7 +42,7 @@
     }
   }
 
-  $: currentProject = projects.find((project) => project.slug === $page.params.slug) ?? null;
+  $: currentProject = projects.find((project) => project.slug === projectSlug) ?? null;
 </script>
 
 <svelte:window on:click={handleWindowClick} />
diff --git a/src/lib/components/AppSidebar.svelte b/src/lib/components/AppSidebar.svelte
index abcf3dd..cf2451b 100644
--- a/src/lib/components/AppSidebar.svelte
+++ b/src/lib/components/AppSidebar.svelte
@@ -7,7 +7,6 @@
     Database,
     FolderKanban,
     GitBranch,
-    HelpCircle,
     Info,
     KeyRound,
     LayoutDashboard,
@@ -23,9 +22,15 @@
   export let isConfigured = false;
   export let collapsed = false;
   export let organizationSlug = 'gitops';
+  export let projects: {
+    slug: string;
+    modules?: { vault: boolean; openreport: boolean; stateiac: boolean };
+  }[] = [];
 
   let currentPath = pathname;
 
+  $: currentProject = projects.find((project) => project.slug === currentProjectSlug) ?? null;
+
   $: sections = [
     {
       title: 'Inicio',
@@ -37,54 +42,48 @@
         },
       ],
     },
-    {
-      title: 'Seguridad',
-      items: [
-        {
-          label: 'Vault',
-          href: '/vault',
-          icon: Shield,
-        },
-      ],
-    },
-    {
-      title: 'Analisis',
-      items: [
-        {
-          label: 'Open Report',
-          href: '/open-report',
-          icon: BarChart3,
-        },
-      ],
-    },
-    {
-      title: 'GitOps',
-      items: [
-        {
-          label: 'Pulumi State',
-          href: '/pulumi-state',
-          icon: GitBranch,
-        },
-      ],
-    },
-  ];
-
-  const pulumiStateItems = [
-    {
-      label: 'Overview',
-      href: '/pulumi-state',
-      icon: GitBranch,
-    },
-    {
-      label: 'Storage Backends',
-      href: '/pulumi-state/backends',
-      icon: Database,
-    },
-    {
-      label: 'CLI Guide',
-      href: '/pulumi-state/cli-guide',
-      icon: HelpCircle,
-    },
+    ...(currentProject?.modules?.vault
+      ? [
+          {
+            title: 'Seguridad',
+            items: [
+              {
+                label: 'Vault',
+                href: `/org/${currentProjectOrgSlug}/projects/${currentProject.slug}/vault`,
+                icon: Shield,
+              },
+            ],
+          },
+        ]
+      : []),
+    ...(currentProject?.modules?.openreport
+      ? [
+          {
+            title: 'Analisis',
+            items: [
+              {
+                label: 'Open Report',
+                href: `/org/${currentProjectOrgSlug}/projects/${currentProject.slug}/report`,
+                icon: BarChart3,
+              },
+            ],
+          },
+        ]
+      : []),
+    ...(currentProject?.modules?.stateiac
+      ? [
+          {
+            title: 'GitOps',
+            items: [
+              {
+                label: 'State IaC',
+                href: `/org/${currentProjectOrgSlug}/projects/${currentProject.slug}/state-iac`,
+                icon: GitBranch,
+              },
+            ],
+          },
+        ]
+      : []),
   ];
 
   const settingsItems = [
@@ -116,7 +115,6 @@
   ];
 
   let settingsMenuOpen = pathname.startsWith('/settings');
-  let pulumiStateMenuOpen = pathname.startsWith('/pulumi-state');
   let projectSettingsMenuOpen = true;
 
   $: currentProjectOrgSlug = ($page.params.org as string | undefined) ?? organizationSlug;
@@ -151,34 +149,7 @@
     return currentPath.startsWith(href);
   }
 
-  function getPulumiStateActiveItem() {
-    if (
-      currentPath.startsWith('/pulumi-state/backends') ||
-      currentPath.startsWith('/settings/storage')
-    ) {
-      return '/pulumi-state/backends';
-    }
-
-    if (currentPath.startsWith('/pulumi-state/cli-guide')) {
-      return '/pulumi-state/cli-guide';
-    }
-
-    if (currentPath.startsWith('/pulumi-state')) {
-      return '/pulumi-state';
-    }
-
-    return null;
-  }
-
-  function isPulumiStateSectionActive() {
-    return getPulumiStateActiveItem() !== null;
-  }
-
   function isActive(path: string) {
-    if (path.startsWith('/pulumi-state')) {
-      return getPulumiStateActiveItem() === path;
-    }
-
     if (path.startsWith('/settings')) {
       return currentPath.startsWith('/settings');
     }
@@ -195,10 +166,6 @@
   $: if (currentPath.startsWith('/settings')) {
     settingsMenuOpen = true;
   }
-
-  $: if (currentPath.startsWith('/pulumi-state')) {
-    pulumiStateMenuOpen = true;
-  }
 </script>
 
 <aside class="flex h-full flex-col gap-4">
@@ -231,7 +198,7 @@
 
   {#if !isConfigured}
     <a
-      href="/pulumi-state/backends"
+      href="/settings/storage"
       class="flex items-center gap-3 rounded-md border border-amber-200 bg-amber-50 p-3 text-amber-950 transition-colors hover:border-amber-300 hover:bg-amber-100 {collapsed
         ? 'justify-center'
         : 'items-start'}"
@@ -261,80 +228,29 @@
 
         <div class="space-y-2">
           {#each section.items as item}
-            {#if item.href === '/pulumi-state' && !collapsed}
-              <div class="space-y-2">
-                <button
-                  type="button"
-                  class="group flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-left transition-colors {isPulumiStateSectionActive()
-                    ? 'btn-primary text-white'
-                    : 'btn-secondary text-slate-700'}"
-                  on:click={() => (pulumiStateMenuOpen = !pulumiStateMenuOpen)}
-                  aria-expanded={pulumiStateMenuOpen}
-                >
-                  <div
-                    class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md {isPulumiStateSectionActive()
-                      ? 'bg-white/10 text-white'
-                      : 'bg-slate-100 text-slate-600'}"
-                  >
-                    <GitBranch class="h-3.5 w-3.5" />
-                  </div>
-                  <p class="min-w-0 flex-1 truncate text-sm font-medium">Pulumi State</p>
-                  {#if pulumiStateMenuOpen}
-                    <ChevronDown class="h-4 w-4 shrink-0" />
-                  {:else}
-                    <ChevronRight class="h-4 w-4 shrink-0" />
-                  {/if}
-                </button>
-
-                {#if pulumiStateMenuOpen}
-                  <div class="ml-4 border-l border-slate-200 pl-3">
-                    <div class="space-y-1">
-                      {#each pulumiStateItems as pulumiItem}
-                        <a
-                          href={pulumiItem.href}
-                          class="group flex items-center gap-2 rounded-md px-2.5 py-2 text-sm transition-colors {isActive(
-                            pulumiItem.href,
-                          )
-                            ? 'bg-slate-100 text-slate-900'
-                            : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}"
-                        >
-                          <svelte:component this={pulumiItem.icon} class="h-3.5 w-3.5 shrink-0" />
-                          <span class="truncate">{pulumiItem.label}</span>
-                        </a>
-                      {/each}
-                    </div>
-                  </div>
-                {/if}
-              </div>
-            {:else}
-              <a
-                href={item.href}
-                class="group flex items-center gap-3 rounded-md border px-3 py-2.5 transition-colors {collapsed
-                  ? 'justify-center'
-                  : 'items-center'} {(
-                  item.href === '/pulumi-state' ? isPulumiStateSectionActive() : isActive(item.href)
+            <a
+              href={item.href}
+              class="group flex items-center gap-3 rounded-md border px-3 py-2.5 transition-colors {collapsed
+                ? 'justify-center'
+                : 'items-center'} {isActive(item.href)
+                ? 'border-slate-900 bg-slate-900 text-white'
+                : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'}"
+              title={item.label}
+            >
+              <div
+                class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md {isActive(
+                  item.href,
                 )
-                  ? 'border-slate-900 bg-slate-900 text-white'
-                  : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'}"
-                title={item.label}
+                  ? 'bg-white/10 text-white'
+                  : 'bg-slate-100 text-slate-600'}"
               >
-                <div
-                  class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md {(
-                    item.href === '/pulumi-state'
-                      ? isPulumiStateSectionActive()
-                      : isActive(item.href)
-                  )
-                    ? 'bg-white/10 text-white'
-                    : 'bg-slate-100 text-slate-600'}"
-                >
-                  <svelte:component this={item.icon} class="h-3.5 w-3.5" />
-                </div>
+                <svelte:component this={item.icon} class="h-3.5 w-3.5" />
+              </div>
 
-                {#if !collapsed}
-                  <p class="min-w-0 flex-1 truncate text-sm font-medium">{item.label}</p>
-                {/if}
-              </a>
-            {/if}
+              {#if !collapsed}
+                <p class="min-w-0 flex-1 truncate text-sm font-medium">{item.label}</p>
+              {/if}
+            </a>
           {/each}
         </div>
       </section>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f406163..ede3a41 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -30,6 +30,7 @@
       user={data.user}
       projects={data.projects}
       organizationSlug={data.organization.slug}
+      projectSlug={$page.params.slug ?? ''}
     />
 
     <div
@@ -42,6 +43,7 @@
           pathname={$page.url.pathname}
           isConfigured={data.isConfigured}
           organizationSlug={data.organization.slug}
+          projects={data.projects}
           bind:collapsed={sidebarCollapsed}
         />
       </aside>
diff --git a/src/routes/how-to/+page.svelte b/src/routes/how-to/+page.svelte
deleted file mode 100644
index 9376f30..0000000
--- a/src/routes/how-to/+page.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-  import { FileText, Terminal, HardDrive } from 'lucide-svelte';
-</script>
-
-<svelte:head>
-  <title>How To - Pulumi Open State</title>
-</svelte:head>
-
-<div class="max-w-4xl space-y-6">
-  <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-8">
-    <h2 class="text-2xl font-bold text-gray-900">How to use Pulumi Open State</h2>
-    <p class="mt-3 text-gray-600">
-      This starter mirrors the main flows from the original Pulumi Open State UI: configure storage
-      backends, connect Pulumi projects, and inspect stack state and history.
-    </p>
-  </div>
-
-  <div class="grid gap-6 md:grid-cols-2">
-    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-8">
-      <div class="flex items-center gap-3 mb-4">
-        <HardDrive class="w-5 h-5 text-blue-600" />
-        <h3 class="text-lg font-semibold">Configure storage</h3>
-      </div>
-      <p class="text-sm text-gray-600">
-        Add an S3 or GCS backend from Pulumi State → Storage Backends to connect your Pulumi state
-        buckets.
-      </p>
-    </div>
-
-    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-8">
-      <div class="flex items-center gap-3 mb-4">
-        <Terminal class="w-5 h-5 text-green-600" />
-        <h3 class="text-lg font-semibold">Use the Pulumi CLI</h3>
-      </div>
-      <p class="text-sm text-gray-600">
-        Run the generated login and stack init commands from the Projects view to connect a local
-        stack.
-      </p>
-    </div>
-  </div>
-
-  <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-8">
-    <div class="flex items-center gap-3 mb-4">
-      <FileText class="w-5 h-5 text-purple-600" />
-      <h3 class="text-lg font-semibold">Inspect state</h3>
-    </div>
-    <p class="text-sm text-gray-600">
-      Open a stack to browse resources, outputs, configuration, and historical checkpoints from the
-      backend.
-    </p>
-  </div>
-</div>
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 0c0ab0d..f84d47b 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -21,7 +21,7 @@
       const payload = await response.json().catch(() => ({}));
 
       if (response.ok && payload?.success) {
-        window.location.href = '/vault';
+        window.location.href = '/';
         return;
       }
 
@@ -38,15 +38,23 @@
   <title>Login - GitVault Suite</title>
 </svelte:head>
 
-<div class="relative grid min-h-[calc(100vh-2rem)] place-items-center overflow-hidden px-4 py-10 sm:px-6">
-  <div class="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_20%_20%,#dbeafe_0%,transparent_45%),radial-gradient(circle_at_80%_0%,#e2e8f0_0%,transparent_35%),linear-gradient(180deg,#f8fafc_0%,#eef2ff_100%)]"></div>
+<div
+  class="relative grid min-h-[calc(100vh-2rem)] place-items-center overflow-hidden px-4 py-10 sm:px-6"
+>
+  <div
+    class="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_20%_20%,#dbeafe_0%,transparent_45%),radial-gradient(circle_at_80%_0%,#e2e8f0_0%,transparent_35%),linear-gradient(180deg,#f8fafc_0%,#eef2ff_100%)]"
+  ></div>
 
-  <div class="w-full max-w-md border border-slate-200 bg-white/90 p-8 shadow-xl backdrop-blur sm:rounded-2xl">
+  <div
+    class="w-full max-w-md border border-slate-200 bg-white/90 p-8 shadow-xl backdrop-blur sm:rounded-2xl"
+  >
     <div class="mb-8 flex flex-col items-center gap-4 text-center">
       <img src="/gitops_logo.png" alt="GitOps" class="h-24 w-auto shrink-0 sm:h-32" />
 
       <div>
-        <p class="text-[10px] font-semibold uppercase tracking-[0.24em] text-slate-500">Workspace</p>
+        <p class="text-[10px] font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Workspace
+        </p>
         <h1 class="mt-2 text-2xl font-bold text-slate-900">Sign in to GitVault Suite</h1>
         <p class="mt-2 text-sm text-slate-600">Continue with your private admin workspace.</p>
       </div>
@@ -58,14 +66,11 @@
       </div>
     {/if}
 
-    <form
-      method="POST"
-      action="/api/auth/login"
-      on:submit={submitLogin}
-      class="space-y-4"
-    >
+    <form method="POST" action="/api/auth/login" on:submit={submitLogin} class="space-y-4">
       <div>
-        <label class="mb-1.5 block text-sm font-medium text-slate-700" for="username">Username</label>
+        <label class="mb-1.5 block text-sm font-medium text-slate-700" for="username"
+          >Username</label
+        >
         <input
           id="username"
           name="username"
@@ -76,7 +81,9 @@
       </div>
 
       <div>
-        <label class="mb-1.5 block text-sm font-medium text-slate-700" for="password">Password</label>
+        <label class="mb-1.5 block text-sm font-medium text-slate-700" for="password"
+          >Password</label
+        >
         <input
           id="password"
           name="password"
@@ -97,7 +104,9 @@
     </form>
 
     <div class="mt-6 border-t border-slate-200 pt-4 text-xs text-slate-500">
-      Default credentials for first start: <span class="font-medium text-slate-700">admin / 12345678</span>
+      Default credentials for first start: <span class="font-medium text-slate-700"
+        >admin / 12345678</span
+      >
     </div>
   </div>
 </div>
diff --git a/src/routes/org/[org]/projects/[slug]/+layout.svelte b/src/routes/org/[org]/projects/[slug]/+layout.svelte
index edb720b..3e88447 100644
--- a/src/routes/org/[org]/projects/[slug]/+layout.svelte
+++ b/src/routes/org/[org]/projects/[slug]/+layout.svelte
@@ -1,6 +1,15 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import { ChevronRight, Info, LayoutDashboard, ScrollText, Shield, Users } from 'lucide-svelte';
+  import {
+    BarChart3,
+    ChevronRight,
+    GitBranch,
+    Info,
+    LayoutDashboard,
+    ScrollText,
+    Shield,
+    Users,
+  } from 'lucide-svelte';
 
   export let data: { project: { id: string; name: string; slug: string } };
 
@@ -16,6 +25,24 @@
       icon: LayoutDashboard,
       subtitle: 'Resumen general del proyecto.',
     },
+    {
+      label: 'Vault',
+      href: `/org/${orgSlug}/projects/${project.slug}/vault`,
+      icon: Shield,
+      subtitle: 'Secretos, credenciales y controles de acceso del proyecto.',
+    },
+    {
+      label: 'Open Report',
+      href: `/org/${orgSlug}/projects/${project.slug}/report`,
+      icon: BarChart3,
+      subtitle: 'Reportes de vulnerabilidades y dependencias del proyecto.',
+    },
+    {
+      label: 'State IaC',
+      href: `/org/${orgSlug}/projects/${project.slug}/state-iac`,
+      icon: GitBranch,
+      subtitle: 'Estado de Pulumi y backends de almacenamiento del proyecto.',
+    },
     {
       label: 'Información',
       href: `/org/${orgSlug}/projects/${project.slug}/settings/overview`,
diff --git a/src/routes/org/[org]/projects/[slug]/overview/+page.svelte b/src/routes/org/[org]/projects/[slug]/overview/+page.svelte
index 8e87308..320c149 100644
--- a/src/routes/org/[org]/projects/[slug]/overview/+page.svelte
+++ b/src/routes/org/[org]/projects/[slug]/overview/+page.svelte
@@ -8,6 +8,7 @@
     Shield,
     UserPlus,
   } from 'lucide-svelte';
+  import { page } from '$app/stores';
 
   type ProjectModules = {
     vault: boolean;
@@ -24,39 +25,42 @@
     modules: ProjectModules;
   };
 
-  export let data: { project: ProjectRow };
-
-  $: project = data.project;
-
-  const moduleInfo: {
+  type ModuleInfo = {
     key: keyof ProjectModules;
     label: string;
     description: string;
     href: string;
     icon: typeof Shield;
-  }[] = [
+  };
+
+  export let data: { project: ProjectRow };
+
+  $: project = data.project;
+  $: orgSlug = $page.params.org;
+
+  $: moduleInfo = [
     {
       key: 'vault',
       label: 'Vault',
       description: 'Secretos, credenciales y controles de acceso.',
-      href: '/vault',
+      href: `/org/${orgSlug}/projects/${project.slug}/vault`,
       icon: Shield,
     },
     {
       key: 'openreport',
       label: 'Open Report',
       description: 'Reportes de vulnerabilidades y dependencias.',
-      href: '/open-report',
+      href: `/org/${orgSlug}/projects/${project.slug}/report`,
       icon: BarChart3,
     },
     {
       key: 'stateiac',
       label: 'State IaC',
       description: 'Estado y backends de Pulumi.',
-      href: '/how-to',
+      href: `/org/${orgSlug}/projects/${project.slug}/state-iac`,
       icon: GitBranch,
     },
-  ];
+  ] satisfies ModuleInfo[];
 
   $: activeModules = moduleInfo.filter((module) => project.modules[module.key]);
 
diff --git a/src/routes/open-report/+page.svelte b/src/routes/org/[org]/projects/[slug]/report/+page.svelte
similarity index 100%
rename from src/routes/open-report/+page.svelte
rename to src/routes/org/[org]/projects/[slug]/report/+page.svelte
diff --git a/src/routes/org/[org]/projects/[slug]/settings/overview/+page.svelte b/src/routes/org/[org]/projects/[slug]/settings/overview/+page.svelte
index a470b84..f6dbb87 100644
--- a/src/routes/org/[org]/projects/[slug]/settings/overview/+page.svelte
+++ b/src/routes/org/[org]/projects/[slug]/settings/overview/+page.svelte
@@ -54,9 +54,24 @@
     icon: typeof Shield;
     href: string;
   }[] = [
-    { key: 'vault', label: 'Vault', icon: Shield, href: '/vault' },
-    { key: 'openreport', label: 'Open Report', icon: BarChart3, href: '/open-report' },
-    { key: 'stateiac', label: 'State IaC', icon: GitBranch, href: '/how-to' },
+    {
+      key: 'vault',
+      label: 'Vault',
+      icon: Shield,
+      href: `/org/${$page.params.org}/projects/${data.project.slug}/vault`,
+    },
+    {
+      key: 'openreport',
+      label: 'Open Report',
+      icon: BarChart3,
+      href: `/org/${$page.params.org}/projects/${data.project.slug}/report`,
+    },
+    {
+      key: 'stateiac',
+      label: 'State IaC',
+      icon: GitBranch,
+      href: `/org/${$page.params.org}/projects/${data.project.slug}/state-iac`,
+    },
   ];
 
   const integrationCards = [
diff --git a/src/routes/org/[org]/projects/[slug]/state-iac/+page.svelte b/src/routes/org/[org]/projects/[slug]/state-iac/+page.svelte
new file mode 100644
index 0000000..1e7bf07
--- /dev/null
+++ b/src/routes/org/[org]/projects/[slug]/state-iac/+page.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { GitBranch, HardDrive, Terminal, Layers } from 'lucide-svelte';
+  import { page } from '$app/stores';
+  import { can } from '$lib/permissions';
+
+  $: canCreate = can($page.data.user, 'stateiac:create');
+</script>
+
+<svelte:head>
+  <title>State IaC - GitVault Suite</title>
+</svelte:head>
+
+<div class="space-y-6">
+  <section class="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-sm">
+    <div
+      class="bg-gradient-to-br from-indigo-950 via-indigo-900 to-slate-900 px-6 py-8 text-white sm:px-8"
+    >
+      <div class="flex items-start justify-between gap-4">
+        <div>
+          <p class="text-[10px] font-semibold uppercase tracking-[0.24em] text-indigo-200">
+            GitOps
+          </p>
+          <h2 class="mt-2 text-3xl font-bold tracking-tight">State IaC</h2>
+          <p class="mt-3 max-w-2xl text-sm leading-6 text-indigo-100/80">
+            Inspecciona el estado de Pulumi, backends de almacenamiento e historial de stacks para
+            este proyecto.
+          </p>
+        </div>
+        {#if canCreate}
+          <a
+            href="/how-to"
+            class="inline-flex shrink-0 items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-semibold text-slate-900 hover:bg-slate-100"
+          >
+            <Terminal class="h-4 w-4" />
+            CLI Guide
+          </a>
+        {/if}
+      </div>
+    </div>
+
+    <div class="grid gap-4 p-6 sm:grid-cols-3 sm:p-8">
+      <div class="rounded-2xl border border-slate-200 bg-slate-50 p-5">
+        <Layers class="h-5 w-5 text-slate-900" />
+        <p class="mt-3 text-sm font-semibold text-slate-900">Stacks</p>
+        <p class="mt-1 text-sm leading-6 text-slate-600">Recursos, outputs y configuración.</p>
+      </div>
+      <div class="rounded-2xl border border-slate-200 bg-slate-50 p-5">
+        <HardDrive class="h-5 w-5 text-slate-900" />
+        <p class="mt-3 text-sm font-semibold text-slate-900">Storage Backends</p>
+        <p class="mt-1 text-sm leading-6 text-slate-600">Buckets S3 o GCS conectados.</p>
+      </div>
+      <div class="rounded-2xl border border-slate-200 bg-slate-50 p-5">
+        <GitBranch class="h-5 w-5 text-slate-900" />
+        <p class="mt-3 text-sm font-semibold text-slate-900">History</p>
+        <p class="mt-1 text-sm leading-6 text-slate-600">Checkpoints e historial de despliegues.</p>
+      </div>
+    </div>
+  </section>
+
+  <section
+    class="rounded-[28px] border border-dashed border-slate-300 bg-white p-6 shadow-sm sm:p-8"
+  >
+    <h3 class="text-lg font-semibold text-slate-900">Próximo paso</h3>
+    <p class="mt-2 max-w-2xl text-sm leading-6 text-slate-600">
+      Esta pantalla es sólo la base visual. El siguiente paso será conectar el estado real de Pulumi
+      para este proyecto.
+    </p>
+  </section>
+</div>
diff --git a/src/routes/vault/+page.svelte b/src/routes/org/[org]/projects/[slug]/vault/+page.svelte
similarity index 100%
rename from src/routes/vault/+page.svelte
rename to src/routes/org/[org]/projects/[slug]/vault/+page.svelte

From 3bf77b9cbe0cb4aaca979c4ac75218a435ce4ad6 Mon Sep 17 00:00:00 2001
From: Carlos Lopez <carlos@kettu.studio>
Date: Thu, 20 Aug 2026 21:31:08 +0200
Subject: [PATCH 14/16] sidebar menus

---
 src/lib/components/AppSidebar.svelte | 450 ++++++++++++---------------
 1 file changed, 194 insertions(+), 256 deletions(-)

diff --git a/src/lib/components/AppSidebar.svelte b/src/lib/components/AppSidebar.svelte
index cf2451b..fe63604 100644
--- a/src/lib/components/AppSidebar.svelte
+++ b/src/lib/components/AppSidebar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { ComponentType } from 'svelte';
   import { page } from '$app/stores';
   import {
     BarChart3,
@@ -17,7 +18,15 @@
     Settings,
     Shield,
     Users,
+    Layers,
+    HardDrive,
+    Bot
   } from 'lucide-svelte';
+
+  type NavItem = { label: string; href: string; icon: ComponentType };
+  type NavModule = { name: string; icon: ComponentType; items: NavItem[] };
+  type NavCategory = { name: string; modules: NavModule[] };
+
   export let pathname = '/';
   export let isConfigured = false;
   export let collapsed = false;
@@ -28,29 +37,42 @@
   }[] = [];
 
   let currentPath = pathname;
+  let openModules: Record<string, boolean> = {};
 
+  $: currentPath = $page.url.pathname || pathname;
+  $: currentProjectOrgSlug = ($page.params.org as string | undefined) ?? organizationSlug;
+  $: currentProjectSlug = $page.params.slug as string | undefined;
   $: currentProject = projects.find((project) => project.slug === currentProjectSlug) ?? null;
 
-  $: sections = [
+  $: projectBase = `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}`;
+
+  // one JSON-like tree drives the whole sidebar: category > module > items
+  $: categories = [
     {
-      title: 'Inicio',
-      items: [
+      name: 'Inicio',
+      modules: [
         {
-          label: 'Overview',
-          href: `/org/${organizationSlug}/overview`,
+          name: 'Overview',
           icon: LayoutDashboard,
+          items: [
+            {
+              label: 'Overview',
+              href: `/org/${organizationSlug}/overview`,
+              icon: LayoutDashboard,
+            },
+          ],
         },
       ],
     },
     ...(currentProject?.modules?.vault
       ? [
           {
-            title: 'Seguridad',
-            items: [
+            name: 'Seguridad',
+            modules: [
               {
-                label: 'Vault',
-                href: `/org/${currentProjectOrgSlug}/projects/${currentProject.slug}/vault`,
+                name: 'Vault',
                 icon: Shield,
+                items: [{ label: 'Vault', href: `${projectBase}/vault`, icon: Shield }],
               },
             ],
           },
@@ -59,12 +81,17 @@
     ...(currentProject?.modules?.openreport
       ? [
           {
-            title: 'Analisis',
-            items: [
+            name: 'Analisis',
+            modules: [
               {
-                label: 'Open Report',
-                href: `/org/${currentProjectOrgSlug}/projects/${currentProject.slug}/report`,
+                name: 'Code Report',
                 icon: BarChart3,
+                items: [
+                  { label: 'Services', href: `${projectBase}/report/services`, icon: Layers },
+                  { label: 'History', href: `${projectBase}/report/history`, icon: GitBranch },
+                  { label: 'GitOps Report Bot', href: `${projectBase}/report/bot`, icon: Bot },
+                  { label: 'Settings', href: `${projectBase}/report/settings`, icon: Settings },
+                ],
               },
             ],
           },
@@ -73,99 +100,82 @@
     ...(currentProject?.modules?.stateiac
       ? [
           {
-            title: 'GitOps',
-            items: [
+            name: 'GitOps',
+            modules: [
               {
-                label: 'State IaC',
-                href: `/org/${currentProjectOrgSlug}/projects/${currentProject.slug}/state-iac`,
+                name: 'State IaC',
                 icon: GitBranch,
+                items: [
+                  { label: 'Stacks', href: `${projectBase}/state-iac/stacks`, icon: Layers },
+                  { label: 'Backends', href: `${projectBase}/state-iac/backends`, icon: HardDrive },
+                  { label: 'Deployments', href: `${projectBase}/state-iac/deployments`, icon: GitBranch }
+                ],
+              },
+            ],
+          },
+        ]
+      : []),
+    ...(currentProjectSlug
+      ? [
+          {
+            name: 'Proyecto',
+            modules: [
+              {
+                name: 'Project Settings',
+                icon: FolderKanban,
+                items: [
+                  { label: 'Información', href: `${projectBase}/settings/overview`, icon: Info },
+                  {
+                    label: 'Users and Groups',
+                    href: `${projectBase}/settings/users-groups`,
+                    icon: Users,
+                  },
+                  {
+                    label: 'Roles and Permissions',
+                    href: `${projectBase}/settings/roles-permissions`,
+                    icon: Shield,
+                  },
+                  { label: 'Audit', href: `${projectBase}/settings/audit`, icon: ScrollText },
+                  { label: 'Server Keys', href: `${projectBase}/settings/server-keys`, icon: Shield },
+                ],
               },
             ],
           },
         ]
       : []),
-  ];
-
-  const settingsItems = [
-    {
-      label: 'Projects',
-      href: '/settings/projects',
-      icon: FolderKanban,
-    },
-    {
-      label: 'Autentication',
-      href: '/settings/authentication',
-      icon: Shield,
-    },
-    {
-      label: 'Roles & Permissions',
-      href: '/settings/roles-permissions',
-      icon: Users,
-    },
-    {
-      label: 'System & Backup',
-      href: '/settings/system-backup',
-      icon: Database,
-    },
     {
-      label: 'Server Access Keys',
-      href: '/settings/server-access-keys',
-      icon: KeyRound,
-    },
-  ];
-
-  let settingsMenuOpen = pathname.startsWith('/settings');
-  let projectSettingsMenuOpen = true;
-
-  $: currentProjectOrgSlug = ($page.params.org as string | undefined) ?? organizationSlug;
-  $: currentProjectSlug = $page.params.slug as string | undefined;
-
-  $: projectSettingsItems = currentProjectSlug
-    ? [
-        {
-          label: 'Información',
-          href: `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/settings/overview`,
-          icon: Info,
-        },
-        {
-          label: 'Users and Groups',
-          href: `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/settings/users-groups`,
-          icon: Users,
-        },
+      name: 'Sistema',
+      modules: [
         {
-          label: 'Roles and Permissions',
-          href: `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/settings/roles-permissions`,
-          icon: Shield,
+          name: 'Settings',
+          icon: Settings,
+          items: [
+            { label: 'Projects', href: '/settings/projects', icon: FolderKanban },
+            { label: 'Autentication', href: '/settings/authentication', icon: Shield },
+            { label: 'Roles & Permissions', href: '/settings/roles-permissions', icon: Users },
+            { label: 'System & Backup', href: '/settings/system-backup', icon: Database },
+            { label: 'Server Access Keys', href: '/settings/server-access-keys', icon: KeyRound },
+          ],
         },
-        {
-          label: 'Audit',
-          href: `/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/settings/audit`,
-          icon: ScrollText,
-        },
-      ]
-    : [];
+      ],
+    },
+  ] satisfies NavCategory[];
 
-  function isProjectSettingsItemActive(href: string) {
+  function isItemActive(href: string) {
     return currentPath.startsWith(href);
   }
 
-  function isActive(path: string) {
-    if (path.startsWith('/settings')) {
-      return currentPath.startsWith('/settings');
-    }
+  function isModuleActive(navModule: NavModule) {
+    return navModule.items.some((item) => isItemActive(item.href));
+  }
 
-    return currentPath.startsWith(path);
+  function toggleModule(navModule: NavModule) {
+    openModules = { ...openModules, [navModule.name]: !(openModules[navModule.name] ?? true) };
   }
 
   function toggleCollapsed() {
     collapsed = !collapsed;
   }
-
-  $: currentPath = $page.url.pathname || pathname;
-
-  $: if (currentPath.startsWith('/settings')) {
-    settingsMenuOpen = true;
-  }
 </script>
 
 <aside class="flex h-full flex-col gap-4">
@@ -216,192 +226,120 @@
   {/if}
 
   <div class="space-y-4">
-    {#each sections as section}
-      <section>
+    {#each categories as category (category.name)}
+      <section
+        class:border-t={category.name === 'Sistema'}
+        class:pt-4={category.name === 'Sistema'}
+        class="border-slate-200"
+      >
         {#if !collapsed}
           <div class="mb-2 px-1">
             <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
-              {section.title}
+              {category.name}
             </p>
           </div>
         {/if}
 
         <div class="space-y-2">
-          {#each section.items as item}
-            <a
-              href={item.href}
-              class="group flex items-center gap-3 rounded-md border px-3 py-2.5 transition-colors {collapsed
-                ? 'justify-center'
-                : 'items-center'} {isActive(item.href)
-                ? 'border-slate-900 bg-slate-900 text-white'
-                : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'}"
-              title={item.label}
-            >
-              <div
-                class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md {isActive(
-                  item.href,
-                )
-                  ? 'bg-white/10 text-white'
-                  : 'bg-slate-100 text-slate-600'}"
+          {#each category.modules as navModule (navModule.name)}
+            {#if navModule.items.length === 1}
+              {@const item = navModule.items[0]}
+              <a
+                href={item.href}
+                class="group flex items-center gap-3 rounded-md border px-3 py-2.5 transition-colors {collapsed
+                  ? 'justify-center'
+                  : 'items-center'} {isItemActive(item.href)
+                  ? 'border-slate-900 bg-slate-900 text-white'
+                  : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'}"
+                title={navModule.name}
               >
-                <svelte:component this={item.icon} class="h-3.5 w-3.5" />
-              </div>
-
-              {#if !collapsed}
-                <p class="min-w-0 flex-1 truncate text-sm font-medium">{item.label}</p>
-              {/if}
-            </a>
-          {/each}
-        </div>
-      </section>
-    {/each}
-
-    {#if currentProjectSlug}
-      <section>
-        {#if !collapsed}
-          <div class="mb-2 px-1">
-            <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
-              Proyecto
-            </p>
-          </div>
-        {/if}
+                <div
+                  class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md {isItemActive(
+                    item.href,
+                  )
+                    ? 'bg-white/10 text-white'
+                    : 'bg-slate-100 text-slate-600'}"
+                >
+                  <svelte:component this={navModule.icon} class="h-3.5 w-3.5" />
+                </div>
 
-        {#if collapsed}
-          <a
-            href={`/org/${currentProjectOrgSlug}/projects/${currentProjectSlug}/settings/overview`}
-            class="group flex items-center justify-center rounded-md border px-3 py-2.5 transition-colors border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"
-            title="Project Settings"
-          >
-            <div
-              class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-600"
-            >
-              <FolderKanban class="h-3.5 w-3.5" />
-            </div>
-          </a>
-        {:else}
-          <div class="space-y-2">
-            <button
-              type="button"
-              class="btn-secondary group flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-left text-slate-700 transition-colors"
-              on:click={() => (projectSettingsMenuOpen = !projectSettingsMenuOpen)}
-              aria-expanded={projectSettingsMenuOpen}
-            >
-              <div
-                class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-600"
+                {#if !collapsed}
+                  <p class="min-w-0 flex-1 truncate text-sm font-medium">{navModule.name}</p>
+                {/if}
+              </a>
+            {:else if collapsed}
+              <a
+                href={navModule.items[0].href}
+                class="group flex items-center justify-center rounded-md border px-3 py-2.5 transition-colors {isModuleActive(
+                  navModule,
+                )
+                  ? 'border-slate-900 bg-slate-900 text-white'
+                  : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'}"
+                title={navModule.name}
               >
-                <FolderKanban class="h-3.5 w-3.5" />
-              </div>
-              <p class="min-w-0 flex-1 truncate text-sm font-medium">Project Settings</p>
-              {#if projectSettingsMenuOpen}
-                <ChevronDown class="h-4 w-4 shrink-0" />
-              {:else}
-                <ChevronRight class="h-4 w-4 shrink-0" />
-              {/if}
-            </button>
-
-            {#if projectSettingsMenuOpen}
-              <div class="ml-4 border-l border-slate-200 pl-3">
-                <div class="space-y-1">
-                  {#each projectSettingsItems as item}
-                    <a
-                      href={item.href}
-                      class="group flex items-center gap-2 rounded-md px-2.5 py-2 text-sm transition-colors {isProjectSettingsItemActive(
-                        item.href,
-                      )
-                        ? 'bg-slate-100 text-slate-900'
-                        : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}"
-                    >
-                      <svelte:component this={item.icon} class="h-3.5 w-3.5 shrink-0" />
-                      <span class="truncate">{item.label}</span>
-                    </a>
-                  {/each}
+                <div
+                  class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md {isModuleActive(
+                    navModule,
+                  )
+                    ? 'bg-white/10 text-white'
+                    : 'bg-slate-100 text-slate-600'}"
+                >
+                  <svelte:component this={navModule.icon} class="h-3.5 w-3.5" />
                 </div>
-              </div>
-            {/if}
-          </div>
-        {/if}
-      </section>
-    {/if}
-
-    <section class="border-t border-slate-200 pt-4">
-      {#if !collapsed}
-        <div class="mb-2 px-1">
-          <p class="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">
-            Sistema
-          </p>
-        </div>
-      {/if}
-
-      {#if collapsed}
-        <a
-          href="/settings/authentication"
-          class="group flex items-center justify-center rounded-md border px-3 py-2.5 transition-colors {isActive(
-            '/settings',
-          )
-            ? 'border-slate-900 bg-slate-900 text-white'
-            : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'}"
-          title="Settings"
-        >
-          <div
-            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md {isActive(
-              '/settings',
-            )
-              ? 'bg-white/10 text-white'
-              : 'bg-slate-100 text-slate-600'}"
-          >
-            <Settings class="h-3.5 w-3.5" />
-          </div>
-        </a>
-      {:else}
-        <div class="space-y-2">
-          <button
-            type="button"
-            class="group flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-left transition-colors {isActive(
-              '/settings',
-            )
-              ? 'btn-primary text-white'
-              : 'btn-secondary text-slate-700'}"
-            on:click={() => (settingsMenuOpen = !settingsMenuOpen)}
-            aria-expanded={settingsMenuOpen}
-          >
-            <div
-              class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md {isActive(
-                '/settings',
-              )
-                ? 'bg-white/10 text-white'
-                : 'bg-slate-100 text-slate-600'}"
-            >
-              <Settings class="h-3.5 w-3.5" />
-            </div>
-            <p class="min-w-0 flex-1 truncate text-sm font-medium">Settings</p>
-            {#if settingsMenuOpen}
-              <ChevronDown class="h-4 w-4 shrink-0" />
+              </a>
             {:else}
-              <ChevronRight class="h-4 w-4 shrink-0" />
-            {/if}
-          </button>
-
-          {#if settingsMenuOpen}
-            <div class="ml-4 border-l border-slate-200 pl-3">
-              <div class="space-y-1">
-                {#each settingsItems as item}
-                  <a
-                    href={item.href}
-                    class="group flex items-center gap-2 rounded-md px-2.5 py-2 text-sm transition-colors {isActive(
-                      item.href,
+              <div class="space-y-2">
+                <button
+                  type="button"
+                  class="group flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-left transition-colors {isModuleActive(
+                    navModule,
+                  )
+                    ? 'btn-primary text-white'
+                    : 'btn-secondary text-slate-700'}"
+                  on:click={() => toggleModule(navModule)}
+                  aria-expanded={openModules[navModule.name] ?? true}
+                >
+                  <div
+                    class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md {isModuleActive(
+                      navModule,
                     )
-                      ? 'bg-slate-100 text-slate-900'
-                      : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}"
+                      ? 'bg-white/10 text-white'
+                      : 'bg-slate-100 text-slate-600'}"
                   >
-                    <svelte:component this={item.icon} class="h-3.5 w-3.5 shrink-0" />
-                    <span class="truncate">{item.label}</span>
-                  </a>
-                {/each}
+                    <svelte:component this={navModule.icon} class="h-3.5 w-3.5" />
+                  </div>
+                  <p class="min-w-0 flex-1 truncate text-sm font-medium">{navModule.name}</p>
+                  {#if openModules[navModule.name] ?? true}
+                    <ChevronDown class="h-4 w-4 shrink-0" />
+                  {:else}
+                    <ChevronRight class="h-4 w-4 shrink-0" />
+                  {/if}
+                </button>
+
+                {#if openModules[navModule.name] ?? true}
+                  <div class="ml-4 border-l border-slate-200 pl-3">
+                    <div class="space-y-1">
+                      {#each navModule.items as item (item.href)}
+                        <a
+                          href={item.href}
+                          class="group flex items-center gap-2 rounded-md px-2.5 py-2 text-sm transition-colors {isItemActive(
+                            item.href,
+                          )
+                            ? 'bg-slate-100 text-slate-900'
+                            : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}"
+                        >
+                          <svelte:component this={item.icon} class="h-3.5 w-3.5 shrink-0" />
+                          <span class="truncate">{item.label}</span>
+                        </a>
+                      {/each}
+                    </div>
+                  </div>
+                {/if}
               </div>
-            </div>
-          {/if}
+            {/if}
+          {/each}
         </div>
-      {/if}
-    </section>
+      </section>
+    {/each}
   </div>
 </aside>

From f0b328e39924bec44f8fcc74ec575f648ab380c9 Mon Sep 17 00:00:00 2001
From: Carlos Lopez <carlos@kettu.studio>
Date: Thu, 20 Aug 2026 22:35:49 +0200
Subject: [PATCH 15/16] create project modal fix

---
 .../[slug]/settings/overview/+page.svelte     | 62 ++++++++++++++-----
 src/routes/settings/projects/+page.svelte     | 30 ++++++---
 2 files changed, 71 insertions(+), 21 deletions(-)

diff --git a/src/routes/org/[org]/projects/[slug]/settings/overview/+page.svelte b/src/routes/org/[org]/projects/[slug]/settings/overview/+page.svelte
index f6dbb87..b5d3bad 100644
--- a/src/routes/org/[org]/projects/[slug]/settings/overview/+page.svelte
+++ b/src/routes/org/[org]/projects/[slug]/settings/overview/+page.svelte
@@ -3,6 +3,7 @@
   import { page } from '$app/stores';
   import {
     Archive,
+    ArchiveRestore,
     BarChart3,
     Bot,
     Building2,
@@ -37,6 +38,7 @@
 
   $: project = data.project;
   $: orgSlug = $page.params.org;
+  $: isArchived = project.status === 'inactive';
 
   let saving = false;
   let error = '';
@@ -168,10 +170,11 @@
     archiveLoading = true;
 
     try {
+      const nextStatus = isArchived ? 'active' : 'inactive';
       const res = await fetch(`/api/projects/${project.id}`, {
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ status: 'inactive' }),
+        body: JSON.stringify({ status: nextStatus }),
       });
 
       const payload = await res.json();
@@ -179,9 +182,9 @@
 
       project = payload.project;
       closeArchiveModal();
-      flashSuccess('Project archived.');
+      flashSuccess(isArchived ? 'Project reactivated.' : 'Project archived.');
     } catch (err: unknown) {
-      error = err instanceof Error ? err.message : 'Failed to archive project.';
+      error = err instanceof Error ? err.message : 'Failed to update project status.';
     } finally {
       archiveLoading = false;
     }
@@ -233,7 +236,16 @@
   {/if}
 
   <section class="overflow-hidden rounded-md border border-slate-200 bg-white">
-    <div class="flex items-center justify-end border-b border-slate-200 px-4 py-4">
+    <div class="flex items-center justify-end gap-3 border-b border-slate-200 px-4 py-4">
+      {#if isArchived}
+        <span
+          class="inline-flex items-center gap-2 rounded-full border border-amber-300 bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-800"
+        >
+          <span class="h-2.5 w-2.5 rounded-full bg-amber-500"></span>
+          Archivado
+        </span>
+      {/if}
+
       <button
         type="button"
         on:click={copySlug}
@@ -413,9 +425,13 @@
 
       <div class="flex items-center justify-between gap-4 px-4 py-4">
         <div>
-          <p class="text-sm font-medium text-slate-900">Archivar proyecto</p>
+          <p class="text-sm font-medium text-slate-900">
+            {isArchived ? 'Activar proyecto' : 'Archivar proyecto'}
+          </p>
           <p class="mt-1 text-xs text-slate-500">
-            El proyecto pasará a estado inactivo y dejará de listarse como activo.
+            {isArchived
+              ? 'El proyecto volverá a estado activo y se listará de nuevo.'
+              : 'El proyecto pasará a estado inactivo y dejará de listarse como activo.'}
           </p>
         </div>
         <button
@@ -423,8 +439,13 @@
           on:click={openArchiveModal}
           class="btn-secondary inline-flex shrink-0 items-center gap-1.5 rounded-md px-2.5 py-2 text-xs font-medium"
         >
-          <Archive class="h-3.5 w-3.5" />
-          Archivar
+          {#if isArchived}
+            <ArchiveRestore class="h-3.5 w-3.5" />
+            Activar
+          {:else}
+            <Archive class="h-3.5 w-3.5" />
+            Archivar
+          {/if}
         </button>
       </div>
 
@@ -461,13 +482,21 @@
       aria-label="Archive project modal"
     >
       <div class="border-b border-slate-200 px-4 py-3">
-        <h5 class="text-sm font-semibold text-slate-900">Archive project</h5>
+        <h5 class="text-sm font-semibold text-slate-900">
+          {isArchived ? 'Activate project' : 'Archive project'}
+        </h5>
       </div>
 
       <div class="px-4 py-4 text-sm text-slate-600">
-        Are you sure you want to archive <span class="font-medium text-slate-900"
-          >{project.name}</span
-        >? It will be marked as inactive.
+        {#if isArchived}
+          Are you sure you want to activate <span class="font-medium text-slate-900"
+            >{project.name}</span
+          >? It will be marked as active again.
+        {:else}
+          Are you sure you want to archive <span class="font-medium text-slate-900"
+            >{project.name}</span
+          >? It will be marked as inactive.
+        {/if}
       </div>
 
       <div class="flex items-center justify-end gap-2 border-t border-slate-200 px-4 py-3">
@@ -484,8 +513,13 @@
           disabled={archiveLoading}
           class="btn-primary inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium"
         >
-          <Archive class="h-4 w-4" />
-          {archiveLoading ? 'Archiving...' : 'Archive project'}
+          {#if isArchived}
+            <ArchiveRestore class="h-4 w-4" />
+            {archiveLoading ? 'Activating...' : 'Activate project'}
+          {:else}
+            <Archive class="h-4 w-4" />
+            {archiveLoading ? 'Archiving...' : 'Archive project'}
+          {/if}
         </button>
       </div>
     </div>
diff --git a/src/routes/settings/projects/+page.svelte b/src/routes/settings/projects/+page.svelte
index 422fb34..d47cb1a 100644
--- a/src/routes/settings/projects/+page.svelte
+++ b/src/routes/settings/projects/+page.svelte
@@ -24,6 +24,7 @@
 
   let createModalOpen = false;
   let creating = false;
+  let createError = '';
   let newName = '';
   let newSlug = '';
   let newDescription = '';
@@ -31,6 +32,7 @@
 
   let deleteModalProject: ProjectRow | null = null;
   let deleteLoading = false;
+  let deleteError = '';
 
   onMount(fetchProjects);
 
@@ -69,7 +71,7 @@
   });
 
   function openCreateModal() {
-    error = '';
+    createError = '';
     newName = '';
     newSlug = '';
     newDescription = '';
@@ -82,10 +84,10 @@
   }
 
   async function createProject() {
-    error = '';
+    createError = '';
 
     if (!newName.trim()) {
-      error = 'Project name is required.';
+      createError = 'Project name is required.';
       return;
     }
 
@@ -109,7 +111,7 @@
       flashSuccess('Project created.');
       await fetchProjects();
     } catch (err: unknown) {
-      error = err instanceof Error ? err.message : 'Failed to create project.';
+      createError = err instanceof Error ? err.message : 'Failed to create project.';
     } finally {
       creating = false;
     }
@@ -117,7 +119,7 @@
 
   function openDeleteModal(project: ProjectRow) {
     deleteModalProject = project;
-    error = '';
+    deleteError = '';
   }
 
   function closeDeleteModal() {
@@ -127,7 +129,7 @@
   async function confirmDelete() {
     if (!deleteModalProject) return;
 
-    error = '';
+    deleteError = '';
     deleteLoading = true;
 
     try {
@@ -139,7 +141,7 @@
       flashSuccess('Project deleted.');
       await fetchProjects();
     } catch (err: unknown) {
-      error = err instanceof Error ? err.message : 'Failed to delete project.';
+      deleteError = err instanceof Error ? err.message : 'Failed to delete project.';
     } finally {
       deleteLoading = false;
     }
@@ -313,6 +315,12 @@
       </div>
 
       <div class="space-y-4 px-4 py-4">
+        {#if createError}
+          <div class="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+            {createError}
+          </div>
+        {/if}
+
         <div>
           <label class="block text-sm font-medium text-slate-700" for="new-project-name">Name</label
           >
@@ -405,6 +413,14 @@
         <h5 class="text-sm font-semibold text-slate-900">Delete project</h5>
       </div>
 
+      {#if deleteError}
+        <div class="px-4 pt-4">
+          <div class="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+            {deleteError}
+          </div>
+        </div>
+      {/if}
+
       <div class="px-4 py-4 text-sm text-slate-600">
         Are you sure you want to delete <span class="font-medium text-slate-900"
           >{deleteModalProject.name}</span

From 266dd34e484fbb60d810b98c1cba9e7ab2bfd277 Mon Sep 17 00:00:00 2001
From: Carlos Lopez <carlos@kettu.studio>
Date: Thu, 20 Aug 2026 22:49:46 +0200
Subject: [PATCH 16/16] lint + unit test project

---
 .../application/project.service.test.ts       | 225 ++++++++++++++++++
 src/routes/+layout.server.ts                  |   2 +-
 src/routes/profile/+page.server.ts            |   2 +-
 vitest.config.ts                              |   8 +-
 4 files changed, 234 insertions(+), 3 deletions(-)
 create mode 100644 src/modules/projects/application/project.service.test.ts

diff --git a/src/modules/projects/application/project.service.test.ts b/src/modules/projects/application/project.service.test.ts
new file mode 100644
index 0000000..6616a25
--- /dev/null
+++ b/src/modules/projects/application/project.service.test.ts
@@ -0,0 +1,225 @@
+import { describe, expect, it, beforeEach } from 'vitest';
+import { ProjectService } from './project.service';
+import { ProjectDomain } from '../domain/project.domain';
+
+class FakeProjectRepository {
+  rows: ProjectDomain[] = [];
+
+  async findAll() {
+    return [...this.rows];
+  }
+
+  async findById(id: string) {
+    return this.rows.find((p) => p.id === id) ?? null;
+  }
+
+  async findBySlug(slug: string) {
+    return this.rows.find((p) => p.slug === slug) ?? null;
+  }
+
+  async create(input: {
+    id: string;
+    slug: string;
+    name: string;
+    description?: string;
+    status: string;
+    modules: { vault: boolean; openreport: boolean; stateiac: boolean };
+  }) {
+    this.rows.push(
+      new ProjectDomain({
+        id: input.id,
+        slug: input.slug,
+        name: input.name,
+        description: input.description,
+        status: input.status,
+        modules: input.modules,
+        createdAt: '2024-01-01T00:00:00.000Z',
+        updatedAt: '2024-01-01T00:00:00.000Z',
+      }),
+    );
+  }
+
+  async update(
+    id: string,
+    changes: {
+      name?: string;
+      slug?: string;
+      description?: string;
+      status?: string;
+      modules?: { vault: boolean; openreport: boolean; stateiac: boolean };
+    },
+  ) {
+    const project = this.rows.find((p) => p.id === id);
+    if (!project) return;
+    if (changes.name !== undefined) project.name = changes.name;
+    if (changes.slug !== undefined) project.slug = changes.slug;
+    if (changes.description !== undefined) project.description = changes.description;
+    if (changes.status !== undefined) project.status = changes.status as 'active' | 'inactive';
+    if (changes.modules !== undefined) project.modules = changes.modules;
+  }
+
+  async deleteById(id: string) {
+    this.rows = this.rows.filter((p) => p.id !== id);
+  }
+}
+
+describe('ProjectService', () => {
+  let repository: FakeProjectRepository;
+  let service: ProjectService;
+
+  beforeEach(() => {
+    repository = new FakeProjectRepository();
+    service = new ProjectService(repository as any);
+  });
+
+  describe('listProjects', () => {
+    it('returns an empty list when there are no projects', async () => {
+      expect(await service.listProjects()).toEqual([]);
+    });
+
+    it('lists created projects', async () => {
+      await service.createProject({ name: 'Platform Core' });
+      const projects = await service.listProjects();
+      expect(projects).toHaveLength(1);
+      expect(projects[0].slug).toBe('platform-core');
+    });
+  });
+
+  describe('getProject / getProjectBySlug', () => {
+    it('throws when the project does not exist', async () => {
+      await expect(service.getProject('missing-id')).rejects.toThrow(/not found/);
+      await expect(service.getProjectBySlug('missing-slug')).rejects.toThrow(/not found/);
+    });
+
+    it('returns the project by id and by slug', async () => {
+      const created = await service.createProject({ name: 'Kettu Studio' });
+
+      const byId = await service.getProject(created.id);
+      expect(byId.slug).toBe('kettu-studio');
+
+      const bySlug = await service.getProjectBySlug('kettu-studio');
+      expect(bySlug.id).toBe(created.id);
+    });
+  });
+
+  describe('createProject', () => {
+    it('requires a non-empty name', async () => {
+      await expect(service.createProject({ name: '   ' })).rejects.toThrow(/name is required/);
+    });
+
+    it('auto-generates a normalized slug from the name when none is provided', async () => {
+      const project = await service.createProject({ name: 'Kettu Studio!!' });
+      expect(project.slug).toBe('kettu-studio');
+    });
+
+    it('uses the provided slug, normalized', async () => {
+      const project = await service.createProject({ name: 'Kettu Studio', slug: 'Custom Slug' });
+      expect(project.slug).toBe('custom-slug');
+    });
+
+    it('rejects creating a project with a duplicate slug', async () => {
+      await service.createProject({ name: 'Kettu Studio' });
+      await expect(service.createProject({ name: 'Kettu Studio' })).rejects.toThrow(
+        /already exists/,
+      );
+    });
+
+    it('defaults status to active for missing or invalid values', async () => {
+      const project = await service.createProject({ name: 'Project A' });
+      expect(project.status).toBe('active');
+    });
+
+    it('accepts an explicit inactive status', async () => {
+      const project = await service.createProject({ name: 'Project B', status: 'inactive' });
+      expect(project.status).toBe('inactive');
+    });
+
+    it('defaults all modules to enabled when none are provided', async () => {
+      const project = await service.createProject({ name: 'Project C' });
+      expect(project.modules).toEqual({ vault: true, openreport: true, stateiac: true });
+    });
+
+    it('accepts a partial modules override, defaulting the rest to enabled', async () => {
+      const project = await service.createProject({
+        name: 'Project D',
+        modules: { vault: false },
+      });
+      expect(project.modules).toEqual({ vault: false, openreport: true, stateiac: true });
+    });
+  });
+
+  describe('updateProject', () => {
+    it('throws when the project does not exist', async () => {
+      await expect(service.updateProject('missing-id', { name: 'X' })).rejects.toThrow(/not found/);
+    });
+
+    it('updates only the fields provided', async () => {
+      const created = await service.createProject({ name: 'Original Name' });
+
+      const updated = await service.updateProject(created.id, { description: 'New description' });
+      expect(updated.name).toBe('Original Name');
+      expect(updated.description).toBe('New description');
+    });
+
+    it('rejects clearing the name', async () => {
+      const created = await service.createProject({ name: 'Original Name' });
+      await expect(service.updateProject(created.id, { name: '   ' })).rejects.toThrow(
+        /name is required/,
+      );
+    });
+
+    it('normalizes the slug when updating it', async () => {
+      const created = await service.createProject({ name: 'Original Name' });
+      const updated = await service.updateProject(created.id, { slug: 'New Slug!!' });
+      expect(updated.slug).toBe('new-slug');
+    });
+
+    it('rejects updating to a slug already used by another project', async () => {
+      await service.createProject({ name: 'Project A', slug: 'taken' });
+      const created = await service.createProject({ name: 'Project B' });
+
+      await expect(service.updateProject(created.id, { slug: 'taken' })).rejects.toThrow(
+        /already exists/,
+      );
+    });
+
+    it('allows keeping the same slug on the same project', async () => {
+      const created = await service.createProject({ name: 'Project A', slug: 'same-slug' });
+      const updated = await service.updateProject(created.id, { slug: 'same-slug' });
+      expect(updated.slug).toBe('same-slug');
+    });
+
+    it('merges partial module updates with the existing modules', async () => {
+      const created = await service.createProject({ name: 'Project A' });
+
+      const updated = await service.updateProject(created.id, { modules: { vault: false } });
+      expect(updated.modules).toEqual({ vault: false, openreport: true, stateiac: true });
+
+      const updatedAgain = await service.updateProject(created.id, {
+        modules: { openreport: false },
+      });
+      expect(updatedAgain.modules).toEqual({ vault: false, openreport: false, stateiac: true });
+    });
+
+    it('updates the status', async () => {
+      const created = await service.createProject({ name: 'Project A' });
+      const updated = await service.updateProject(created.id, { status: 'inactive' });
+      expect(updated.status).toBe('inactive');
+    });
+  });
+
+  describe('deleteProject', () => {
+    it('throws when the project does not exist', async () => {
+      await expect(service.deleteProject('missing-id')).rejects.toThrow(/not found/);
+    });
+
+    it('deletes an existing project', async () => {
+      const created = await service.createProject({ name: 'Project A' });
+
+      await service.deleteProject(created.id);
+
+      const projects = await service.listProjects();
+      expect(projects.find((p) => p.id === created.id)).toBeUndefined();
+    });
+  });
+});
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index d268e40..5de5c53 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -3,7 +3,7 @@ import { organizationService } from '../modules/organization';
 import { can } from '../modules/auth';
 // import { configService, storageBackendService } from '../modules/config';
 
-export async function load({ cookies, locals }) {
+export async function load({ locals }) {
   // const config = configService.getConfig();
   // const backends = storageBackendService.list();
 
diff --git a/src/routes/profile/+page.server.ts b/src/routes/profile/+page.server.ts
index 8719a70..1fde3ee 100644
--- a/src/routes/profile/+page.server.ts
+++ b/src/routes/profile/+page.server.ts
@@ -16,7 +16,7 @@ function expiresAtFromDays(expiresInDays: string | null): string | null {
   return date.toISOString();
 }
 
-export async function load({ locals, cookies }) {
+export async function load({ locals }) {
   if (!locals.user) {
     throw redirect(302, '/login');
   }
diff --git a/vitest.config.ts b/vitest.config.ts
index 30c7f9d..aea1a28 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,9 +1,15 @@
+import path from 'path';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      $lib: path.resolve(import.meta.dirname, 'src/lib'),
+    },
+  },
   test: {
     environment: 'node',
     include: ['src/**/*.test.ts', 'src/**/*.spec.ts'],
     globals: true,
   },
-});
\ No newline at end of file
+});