From 5ac4c987d32734329c11dcbd80b8e005cd39e795 Mon Sep 17 00:00:00 2001
From: Allan Eising <allan@eising.dk>
Date: Mon, 14 Jul 2025 12:08:09 +0200
Subject: [PATCH] Implement routes and transitions

---
 packages/sshecret-frontend/src/api/paths.ts   |  23 ++
 packages/sshecret-frontend/src/api/types.ts   |   6 +
 .../src/components/audit/AuditSkeleton.vue    | 108 ++++++
 .../src/components/audit/AuditTable.vue       | 355 +++++++++---------
 .../clients/ClientSecretTreeItem.vue          |   4 +-
 .../src/components/clients/ClientSkeleton.vue |   6 -
 .../src/components/common/DetailPage.vue      |  15 +
 .../src/components/common/GenericDetail.vue   |   3 +
 .../common/MasterDetailWorkspace.vue          | 109 ++++++
 .../src/components/common/MasterTabs.vue      |  36 ++
 .../components/common/TreeItemSkeleton.vue    |  15 +
 .../src/components/secrets/SecretSkeleton.vue | 108 ++++--
 packages/sshecret-frontend/src/main.ts        |   2 +
 .../sshecret-frontend/src/router/index.ts     |  59 ++-
 .../src/store/useTreeState.ts                 |  16 +
 .../src/views/WorkspaceView.vue               |  91 +----
 .../src/views/audit/AuditPage.vue             |  29 ++
 .../src/views/audit/AuditView.vue             |   8 +-
 .../src/views/clients/ClientDetailPage.vue    |  24 ++
 .../src/views/clients/ClientDetailView.vue    |  34 +-
 .../src/views/clients/ClientPage.vue          |  29 ++
 .../src/views/clients/ClientTreeList.vue      |  50 +--
 .../src/views/layout/MasterDetail.vue         |   3 +-
 .../src/views/secrets/SecretDetailView.vue    |  43 +--
 .../views/secrets/SecretGroupDetailView.vue   |  10 +-
 .../src/views/secrets/SecretPage.vue          |  32 ++
 .../src/views/secrets/SecretTreeList.vue      |  18 +-
 27 files changed, 860 insertions(+), 376 deletions(-)
 create mode 100644 packages/sshecret-frontend/src/api/paths.ts
 create mode 100644 packages/sshecret-frontend/src/components/audit/AuditSkeleton.vue
 create mode 100644 packages/sshecret-frontend/src/components/common/DetailPage.vue
 create mode 100644 packages/sshecret-frontend/src/components/common/GenericDetail.vue
 create mode 100644 packages/sshecret-frontend/src/components/common/MasterDetailWorkspace.vue
 create mode 100644 packages/sshecret-frontend/src/components/common/MasterTabs.vue
 create mode 100644 packages/sshecret-frontend/src/components/common/TreeItemSkeleton.vue
 create mode 100644 packages/sshecret-frontend/src/views/audit/AuditPage.vue
 create mode 100644 packages/sshecret-frontend/src/views/clients/ClientDetailPage.vue
 create mode 100644 packages/sshecret-frontend/src/views/clients/ClientPage.vue
 create mode 100644 packages/sshecret-frontend/src/views/secrets/SecretPage.vue

diff --git a/packages/sshecret-frontend/src/api/paths.ts b/packages/sshecret-frontend/src/api/paths.ts
new file mode 100644
index 0000000..d34df58
--- /dev/null
+++ b/packages/sshecret-frontend/src/api/paths.ts
@@ -0,0 +1,23 @@
+
+/*
+ * Split a path like /foo/bar/baz into ['foo', 'bar', 'baz']
+ */
+export function splitPath(path: string): string[] {
+  if (path.startsWith('/')) {
+    const newPath = path.substring(1)
+    return newPath.split("/")
+  }
+  return path.split("/")
+}
+
+/*
+ * Reassemble a path array like ['foo', 'bar', 'baz'] into /foo/bar/baz
+ */
+export function reassemblePath(segments: string[]): string {
+  const elements = segments.join('/')
+  return '/' + elements
+}
+
+export function idKey(id: string): string {
+  return 'id:' + id
+}
diff --git a/packages/sshecret-frontend/src/api/types.ts b/packages/sshecret-frontend/src/api/types.ts
index 0715ceb..7ddf6c8 100644
--- a/packages/sshecret-frontend/src/api/types.ts
+++ b/packages/sshecret-frontend/src/api/types.ts
@@ -8,6 +8,7 @@ export enum SshecretObjectType {
   Client = "Client",
   ClientSecret = "ClientSecret",
   SecretGroup = "SecretGroup",
+  Audit = "Audit",  // Not technically an object, but added for navigational purposes.
 }
 
 export type SshecretObject = {
@@ -71,3 +72,8 @@ export const SUBSYSTEM = [
   'sshd',
   'backend',
 ] as const
+
+export interface PageState {
+  activePane: 'clients' | 'secrets' | 'audit',
+  selectedObject?: string,
+}
diff --git a/packages/sshecret-frontend/src/components/audit/AuditSkeleton.vue b/packages/sshecret-frontend/src/components/audit/AuditSkeleton.vue
new file mode 100644
index 0000000..3aa2795
--- /dev/null
+++ b/packages/sshecret-frontend/src/components/audit/AuditSkeleton.vue
@@ -0,0 +1,108 @@
+<template>
+  <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
+    <thead class="bg-gray-50 dark:bg-gray-700">
+      <tr>
+        <th
+          scope="col"
+          class="w-[1rem] p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+        >
+          &nbsp;
+        </th>
+        <th
+          scope="col"
+          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+        >
+          <sl-skeleton class="headerSkeleton"></sl-skeleton>
+        </th>
+        <th
+          scope="col"
+          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+        >
+          <sl-skeleton class="headerSkeleton"></sl-skeleton>
+        </th>
+        <th
+          scope="col"
+          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+        >
+          <sl-skeleton class="headerSkeleton"></sl-skeleton>
+        </th>
+        <th
+          scope="col"
+          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+        >
+          <sl-skeleton class="headerSkeleton"></sl-skeleton>
+        </th>
+        <th
+          scope="col"
+          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+        >
+          <sl-skeleton class="headerSkeleton"></sl-skeleton>
+        </th>
+        <th
+          scope="col"
+          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+        >
+          <sl-skeleton class="headerSkeleton"></sl-skeleton>
+        </th>
+        <th
+          scope="col"
+          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+        >
+          <sl-skeleton class="headerSkeleton"></sl-skeleton>
+        </th>
+      </tr>
+    </thead>
+    <tbody class="bg-white dark:bg-gray-800">
+      <template v-for="row in 25">
+        <tr class="auditRow hover:bg-gray-100 dark:hover:bg-gray-700">
+          <td class="w-[1rem]">
+            <sl-skeleton class="iconSkeleton"></sl-skeleton>
+          </td>
+          <template v-for="col in 7">
+            <td><sl-skeleton effect="pulse" class="tableSkeleton"></sl-skeleton></td>
+          </template>
+        </tr>
+      </template>
+    </tbody>
+  </table>
+  <div
+    class="sticky bottom-0 right-0 items-center w-full p-4 bg-white border-t border-gray-200 sm:flex sm:justify-between dark:bg-gray-800 dark:border-gray-700"
+  >
+    <div class="flex items-center mb-4 sm:mb-0">
+      <span class="text-sm font-normal text-gray-500 dark:text-gray-400">
+        <sl-skeleton effect="pulse" style="width: 10rem"></sl-skeleton>
+      </span>
+    </div>
+
+    <div class="flex items-center space-x-3">
+      <div class="flex space-x-1">
+        <sl-skeleton effect="pulse" style="width: 2rem"></sl-skeleton>
+        <sl-skeleton effect="pulse" style="width: 1rem"></sl-skeleton>
+        <sl-skeleton effect="pulse" style="width: 15rem"></sl-skeleton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+tr.auditRow {
+  background-color: var(--color-white);
+}
+tr.auditRow:nth-child(even) {
+  background-color: var(--color-gray-50);
+}
+sl-skeleton.tableSkeleton {
+  height: 1rem;
+  margin: 1rem;
+}
+sl-skeleton.headerSkeleton {
+  height: 1rem;
+  margin: 1rem;
+  width: 50%;
+}
+
+sl-skeleton.iconSkeleton {
+  margin: 1em;
+  width: 1em;
+}
+</style>
diff --git a/packages/sshecret-frontend/src/components/audit/AuditTable.vue b/packages/sshecret-frontend/src/components/audit/AuditTable.vue
index 314bb28..d0f34a3 100644
--- a/packages/sshecret-frontend/src/components/audit/AuditTable.vue
+++ b/packages/sshecret-frontend/src/components/audit/AuditTable.vue
@@ -1,182 +1,190 @@
 <template>
-  <table v-if="auditEntries" class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
-    <thead class="bg-gray-50 dark:bg-gray-700">
-      <tr>
-        <th
-          scope="col"
-          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
-        >
-          &nbsp;
-        </th>
-        <th
-          scope="col"
-          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
-        >
-          Timestamp
-        </th>
-        <th
-          scope="col"
-          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
-        >
-          Subsystem
-        </th>
-        <th
-          scope="col"
-          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
-        >
-          Operation
-        </th>
-        <th
-          scope="col"
-          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
-        >
-          Client
-        </th>
-        <th
-          scope="col"
-          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
-        >
-          Secret
-        </th>
-        <th
-          scope="col"
-          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
-        >
-          Message
-        </th>
-        <th
-          scope="col"
-          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
-        >
-          Origin
-        </th>
-      </tr>
-    </thead>
-    <tbody class="bg-white dark:bg-gray-800">
-      <template v-for="entry in auditEntries" :key="entry.id">
-        <tr class="auditRow hover:bg-gray-100 dark:hover:bg-gray-700">
-          <td>
-            <sl-icon-button
-              name="chevron-right"
-              @click="toggle(entry.id)"
-              :class="{ 'rotate-90': isExpanded(entry.id) }"
-            ></sl-icon-button>
-          </td>
-          <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-            {{ entry.timestamp }}
-          </td>
-          <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-            {{ entry.subsystem }}
-          </td>
-
-          <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-            {{ entry.operation }}
-          </td>
-
-          <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-            <abbr :title="entry.client_id" v-if="entry.client_name">{{ entry.client_name }}</abbr>
-          </td>
-          <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-            <abbr :title="entry.secret_id" v-if="entry.secret_name">{{ entry.secret_name }}</abbr>
-          </td>
-          <td class="p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400">
-            {{ entry.message }}
-          </td>
-          <td class="p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400">
-            {{ entry.origin }}
-          </td>
+  <template v-if="auditEntries">
+    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
+      <thead class="bg-gray-50 dark:bg-gray-700">
+        <tr>
+          <th
+            scope="col"
+            class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+          >
+            &nbsp;
+          </th>
+          <th
+            scope="col"
+            class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+          >
+            Timestamp
+          </th>
+          <th
+            scope="col"
+            class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+          >
+            Subsystem
+          </th>
+          <th
+            scope="col"
+            class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+          >
+            Operation
+          </th>
+          <th
+            scope="col"
+            class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+          >
+            Client
+          </th>
+          <th
+            scope="col"
+            class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+          >
+            Secret
+          </th>
+          <th
+            scope="col"
+            class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+          >
+            Message
+          </th>
+          <th
+            scope="col"
+            class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+          >
+            Origin
+          </th>
         </tr>
-        <tr v-if="isExpanded(entry.id)" class="auditRow">
-          <td></td>
-          <td colspan="8">
-            <dl
-              class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 px-2 py-2"
-            >
-              <div class="flex flex-col pb-3">
-                <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">ID</dt>
-                <dd class="text-xs font-semibold">{{ entry.id }}</dd>
-              </div>
-              <div class="flex flex-col pb-3">
-                <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Subsystem</dt>
-                <dd class="text-xs font-semibold">{{ entry.subsystem }}</dd>
-              </div>
-              <div class="flex flex-col pb-3">
-                <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Timestamp</dt>
-                <dd class="text-xs font-semibold">{{ entry.timestamp }}</dd>
-              </div>
-              <div class="flex flex-col pb-3">
-                <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Operation</dt>
-                <dd class="text-xs font-semibold">{{ entry.operation }}</dd>
-              </div>
-              <div class="flex flex-col pb-3">
-                <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client ID</dt>
-                <dd class="text-xs font-semibold">{{ entry.client_id }}</dd>
-              </div>
-              <div class="flex flex-col pb-3">
-                <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client Name</dt>
-                <dd class="text-xs font-semibold">{{ entry.client_name }}</dd>
-              </div>
-              <div class="flex flex-col pb-3">
-                <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret ID</dt>
-                <dd class="text-xs font-semibold">{{ entry.secret_id }}</dd>
-              </div>
-              <div class="flex flex-col pb-3">
-                <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret Name</dt>
-                <dd class="text-xs font-semibold">{{ entry.secret_name }}</dd>
-              </div>
-              <div class="flex flex-col pb-3">
-                <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Message</dt>
-                <dd class="text-xs font-semibold">{{ entry.message }}</dd>
-              </div>
-              <div class="flex flex-col pb-3">
-                <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Origin</dt>
-                <dd class="text-xs font-semibold">{{ entry.origin }}</dd>
-              </div>
-              <template v-if="entry.data">
-                <template v-for="(value, key) in entry.data">
-                  <div class="flex flex-col pb-3">
-                    <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">{{ key }}</dt>
-                    <dd class="text-xs font-semibold">{{ value }}</dd>
-                  </div>
+      </thead>
+      <tbody class="bg-white dark:bg-gray-800">
+        <template v-for="entry in auditEntries" :key="entry.id">
+          <tr class="auditRow hover:bg-gray-100 dark:hover:bg-gray-700">
+            <td>
+              <sl-icon-button
+                name="chevron-right"
+                @click="toggle(entry.id)"
+                :class="{ 'rotate-90': isExpanded(entry.id) }"
+              ></sl-icon-button>
+            </td>
+            <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
+              {{ entry.timestamp }}
+            </td>
+            <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
+              {{ entry.subsystem }}
+            </td>
+
+            <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
+              {{ entry.operation }}
+            </td>
+
+            <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
+              <abbr :title="entry.client_id" v-if="entry.client_name">{{ entry.client_name }}</abbr>
+            </td>
+            <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
+              <abbr :title="entry.secret_id" v-if="entry.secret_name">{{ entry.secret_name }}</abbr>
+            </td>
+            <td class="p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400">
+              {{ entry.message }}
+            </td>
+            <td class="p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400">
+              {{ entry.origin }}
+            </td>
+          </tr>
+          <tr v-if="isExpanded(entry.id)" class="auditRow">
+            <td></td>
+            <td colspan="8">
+              <dl
+                class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 px-2 py-2"
+              >
+                <div class="flex flex-col pb-3">
+                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">ID</dt>
+                  <dd class="text-xs font-semibold">{{ entry.id }}</dd>
+                </div>
+                <div class="flex flex-col pb-3">
+                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Subsystem</dt>
+                  <dd class="text-xs font-semibold">{{ entry.subsystem }}</dd>
+                </div>
+                <div class="flex flex-col pb-3">
+                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Timestamp</dt>
+                  <dd class="text-xs font-semibold">{{ entry.timestamp }}</dd>
+                </div>
+                <div class="flex flex-col pb-3">
+                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Operation</dt>
+                  <dd class="text-xs font-semibold">{{ entry.operation }}</dd>
+                </div>
+                <div class="flex flex-col pb-3">
+                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client ID</dt>
+                  <dd class="text-xs font-semibold">{{ entry.client_id }}</dd>
+                </div>
+                <div class="flex flex-col pb-3">
+                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client Name</dt>
+                  <dd class="text-xs font-semibold">{{ entry.client_name }}</dd>
+                </div>
+                <div class="flex flex-col pb-3">
+                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret ID</dt>
+                  <dd class="text-xs font-semibold">{{ entry.secret_id }}</dd>
+                </div>
+                <div class="flex flex-col pb-3">
+                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret Name</dt>
+                  <dd class="text-xs font-semibold">{{ entry.secret_name }}</dd>
+                </div>
+                <div class="flex flex-col pb-3">
+                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Message</dt>
+                  <dd class="text-xs font-semibold">{{ entry.message }}</dd>
+                </div>
+                <div class="flex flex-col pb-3">
+                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Origin</dt>
+                  <dd class="text-xs font-semibold">{{ entry.origin }}</dd>
+                </div>
+                <template v-if="entry.data">
+                  <template v-for="(value, key) in entry.data">
+                    <div class="flex flex-col pb-3">
+                      <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">{{ key }}</dt>
+                      <dd class="text-xs font-semibold">{{ value }}</dd>
+                    </div>
+                  </template>
                 </template>
-              </template>
-            </dl>
-          </td>
-        </tr>
-      </template>
-    </tbody>
-  </table>
-  <div
-    class="sticky bottom-0 right-0 items-center w-full p-4 bg-white border-t border-gray-200 sm:flex sm:justify-between dark:bg-gray-800 dark:border-gray-700"
-    v-if="totalPages > 0"
-  >
-    <div class="flex items-center mb-4 sm:mb-0">
-      <span class="text-sm font-normal text-gray-500 dark:text-gray-400">
-        Showing
-        <span class="font-semibold text-gray-900 dark:text-white" v-if="totalEntries < lastResult">
-          {{ firstResult }}-{{ TotalEntries }}
+              </dl>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+    <div
+      class="sticky bottom-0 right-0 items-center w-full p-4 bg-white border-t border-gray-200 sm:flex sm:justify-between dark:bg-gray-800 dark:border-gray-700"
+      v-if="totalPages > 0"
+    >
+      <div class="flex items-center mb-4 sm:mb-0">
+        <span class="text-sm font-normal text-gray-500 dark:text-gray-400">
+          Showing
+          <span
+            class="font-semibold text-gray-900 dark:text-white"
+            v-if="totalEntries < lastResult"
+          >
+            {{ firstResult }}-{{ TotalEntries }}
+          </span>
+          <span class="font-semibold text-gray-900 dark:text-white" v-else>
+            {{ firstResult }}-{{ lastResult }}
+          </span>
+          of
+          <span class="font-semibold text-gray-900 dark:text-white">
+            {{ totalEntries }}
+          </span>
         </span>
-        <span class="font-semibold text-gray-900 dark:text-white" v-else>
-          {{ firstResult }}-{{ lastResult }}
-        </span>
-        of
-        <span class="font-semibold text-gray-900 dark:text-white">
-          {{ totalEntries }}
-        </span>
-      </span>
-    </div>
-    <div class="flex items-center space-x-3">
-      <div class="flex space-x-1">
-        <PageNumbers
-          @next="nextPage"
-          @previous="prevPage"
-          @goto="goToPage"
-          :pageNum="pageNum"
-          :totalPages="totalPages"
-        />
+      </div>
+      <div class="flex items-center space-x-3">
+        <div class="flex space-x-1">
+          <PageNumbers
+            @next="nextPage"
+            @previous="prevPage"
+            @goto="goToPage"
+            :pageNum="pageNum"
+            :totalPages="totalPages"
+          />
+        </div>
       </div>
     </div>
-  </div>
+  </template>
+  <template v-else>
+    <AuditSkeleton />
+  </template>
 </template>
 <script setup lang="ts">
 import { computed, ref, reactive, onMounted, watch, toRef } from 'vue'
@@ -186,6 +194,7 @@ import { SshecretAdmin, GetAuditLogApiV1AuditGetData } from '@/client'
 import type { AuditListResult } from '@/client'
 import type { AuditFilter } from '@/api/types'
 import PageNumbers from '@/components/common/PageNumbers.vue'
+import AuditSkeleton from '@/components/audit/AuditSkeleton.vue'
 
 const props = defineProps<{ auditFilter: AuditFilter }>()
 
diff --git a/packages/sshecret-frontend/src/components/clients/ClientSecretTreeItem.vue b/packages/sshecret-frontend/src/components/clients/ClientSecretTreeItem.vue
index ba0e219..23940e1 100644
--- a/packages/sshecret-frontend/src/components/clients/ClientSecretTreeItem.vue
+++ b/packages/sshecret-frontend/src/components/clients/ClientSecretTreeItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <sl-tree-item :id="itemId" data-type="secret" :data-name="name" :data-parent-id="parent_id">
+  <sl-tree-item :id="itemId" data-type="secret" :data-name="name" :data-parent-id="props.parentId">
     <sl-icon name="file-lock2"> </sl-icon>
     <span class="px-2">{{ name }}</span>
   </sl-tree-item>
@@ -12,5 +12,5 @@ const props = defineProps<{
   name: string
   selected?: boolean
 }>()
-const itemId = computed(() => `client-${props.parent_id}-secret-${props.name}`)
+const itemId = computed(() => `client-${props.parentId}-secret-${props.name}`)
 </script>
diff --git a/packages/sshecret-frontend/src/components/clients/ClientSkeleton.vue b/packages/sshecret-frontend/src/components/clients/ClientSkeleton.vue
index 6f3b96d..cab15e0 100644
--- a/packages/sshecret-frontend/src/components/clients/ClientSkeleton.vue
+++ b/packages/sshecret-frontend/src/components/clients/ClientSkeleton.vue
@@ -69,9 +69,3 @@ p sl-skeleton {
   width: 10rem;
 }
 </style>
-
-<script setup lang="ts">
-import '@shoelace-style/shoelace/dist/components/tab-group/tab-group.js'
-import '@shoelace-style/shoelace/dist/components/tab/tab.js'
-import '@shoelace-style/shoelace/dist/components/skeleton/skeleton.js'
-</script>
diff --git a/packages/sshecret-frontend/src/components/common/DetailPage.vue b/packages/sshecret-frontend/src/components/common/DetailPage.vue
new file mode 100644
index 0000000..df3ca7d
--- /dev/null
+++ b/packages/sshecret-frontend/src/components/common/DetailPage.vue
@@ -0,0 +1,15 @@
+<template></template>
+<script setup lang="ts">
+/*
+     This component is responsible for loading the correct object based on props and state.
+  */
+
+import AuditView from '@/views/audit/AuditView.vue'
+import ClientDetailView from '@/views/clients/ClientDetailView.vue'
+import SecretDetailView from '@/views/secrets/SecretDetailView.vue'
+import SecretGroupDetailView from '@/views/secrets/SecretGroupDetailView.vue'
+import { SshecretObjectType } from '@/api/types'
+import { useAuditFilterState } from '@/store/useAuditFilterState'
+import { useTreeState } from '@/store/useTreeState'
+import { useAlertsStore } from '@/store/useAlertsStore'
+</script>
diff --git a/packages/sshecret-frontend/src/components/common/GenericDetail.vue b/packages/sshecret-frontend/src/components/common/GenericDetail.vue
new file mode 100644
index 0000000..85d3348
--- /dev/null
+++ b/packages/sshecret-frontend/src/components/common/GenericDetail.vue
@@ -0,0 +1,3 @@
+<template>
+  <p class="p-4 text-gray-500 dark:text-gray-200">Select an item to view details</p>
+</template>
diff --git a/packages/sshecret-frontend/src/components/common/MasterDetailWorkspace.vue b/packages/sshecret-frontend/src/components/common/MasterDetailWorkspace.vue
new file mode 100644
index 0000000..94781db
--- /dev/null
+++ b/packages/sshecret-frontend/src/components/common/MasterDetailWorkspace.vue
@@ -0,0 +1,109 @@
+<template>
+  <MasterDetail>
+    <template #master>
+      <MasterTabs :selectedTab="selectedTab" @change="tabSelected" />
+    </template>
+    <template #detail v-if="showAudit || selectedTab === 'audit'">
+      <AuditView />
+    </template>
+    <template #detail v-else>
+      <template v-if="treeState.selected">
+        <ClientDetailView
+          v-if="treeState.selected.objectType === SshecretObjectType.Client"
+          :clientId="treeState.selected.id"
+          :key="treeState.selected.id"
+        />
+        <SecretDetailView
+          v-else-if="treeState.selected.objectType === SshecretObjectType.ClientSecret"
+          :secretName="treeState.selected.id"
+          :parentId="null"
+          :key="treeState.selected.id"
+        />
+        <SecretGroupDetailView
+          v-else-if="
+            treeState.selected.objectType === SshecretObjectType.SecretGroup &&
+            treeState.selected.id != 'ungrouped'
+          "
+          :groupPath="treeState.selected.id"
+          :key="treeState.selected.id"
+        />
+      </template>
+    </template>
+  </MasterDetail>
+</template>
+<script setup lang="ts">
+import type { PageState } from '@/api/types'
+import { computed, ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import MasterTabs from '@/components/common/MasterTabs.vue'
+import MasterDetail from '@/views/layout/MasterDetail.vue'
+import AuditView from '@/views/audit/AuditView.vue'
+import ClientTreeList from '@/views/clients/ClientTreeList.vue'
+import SecretTreeList from '@/views/secrets/SecretTreeList.vue'
+import ClientDetailView from '@/views/clients/ClientDetailView.vue'
+import SecretDetailView from '@/views/secrets/SecretDetailView.vue'
+import SecretGroupDetailView from '@/views/secrets/SecretGroupDetailView.vue'
+import AuditFilters from '@/components/audit/AuditFilters.vue'
+import GenericDetail from '@/components/common/GenericDetail.vue'
+
+import { SshecretObjectType } from '@/api/types'
+import { useAuditFilterState } from '@/store/useAuditFilterState'
+import { useTreeState } from '@/store/useTreeState'
+import { useAlertsStore } from '@/store/useAlertsStore'
+
+const router = useRouter()
+const alerts = useAlertsStore()
+
+const treeState = useTreeState()
+
+const auditFilterState = useAuditFilterState()
+
+const showAudit = ref<{ boolean }>()
+
+const props = defineProps<{ loadPage: PageState }>()
+
+const selectedTab = computed(() => props.loadPage?.activePane)
+const selectedClientName = ref()
+
+async function loadObjectSelection() {
+  if (!props.loadPage) {
+    return
+  }
+  if (props.loadPage.activePane === 'audit') {
+    treeState.showAudit = true
+    showAudit.value = true
+  }
+  if (props.loadPage.activePane === 'clients' && props.loadPage.selectedObject) {
+    try {
+      await treeState.loadClientName(props.loadPage.selectedObject)
+      selectedClientName.value = props.loadPage.selectedObject
+    } catch (e) {
+      // We need to figure out how to generate a 404 here
+      alerts.showAlert('Could not find the object', 'error')
+    }
+  }
+}
+
+function tabSelected(tabName) {
+  router.push({ name: tabName })
+  if (tabName == 'audit') {
+    treeState.showAudit = true
+    showAudit.value = true
+  } else {
+    treeState.showAudit = false
+    showAudit.value = false
+  }
+}
+
+onMounted(loadObjectSelection)
+</script>
+
+<style>
+sl-tab-group.master-pane-tabs::part(base),
+sl-tab-group.master-pane-tabs::part(body),
+sl-tab-group.master-pane-tabs sl-tab-panel::part(base),
+sl-tab-group.master-pane-tabs sl-tab-panel::part(body),
+sl-tab-group.master-pane-tabs sl-tab-panel {
+  height: 100%;
+}
+</style>
diff --git a/packages/sshecret-frontend/src/components/common/MasterTabs.vue b/packages/sshecret-frontend/src/components/common/MasterTabs.vue
new file mode 100644
index 0000000..0750239
--- /dev/null
+++ b/packages/sshecret-frontend/src/components/common/MasterTabs.vue
@@ -0,0 +1,36 @@
+<template>
+  <sl-tab-group
+    id="sideTabs"
+    class="flex flex-col flex-1 h-full overflow-hidden master-pane-tabs"
+    @sl-tab-show="emit('change', $event.detail.name)"
+  >
+    <sl-tab slot="nav" panel="clients" :active="selectedTab === 'clients'">Clients</sl-tab>
+    <sl-tab slot="nav" panel="secrets" :active="selectedTab === 'secrets'">Secrets</sl-tab>
+    <sl-tab slot="nav" panel="audit" :active="selectedTab === 'audit'">Audit</sl-tab>
+    <sl-tab-panel name="clients">
+      <slot name="clients">
+        <ClientTreeList />
+      </slot>
+    </sl-tab-panel>
+    <sl-tab-panel name="secrets">
+      <slot name="secrets">
+        <SecretTreeList />
+      </slot>
+    </sl-tab-panel>
+    <sl-tab-panel name="audit">
+      <slot name="audit">
+        <AuditFilters />
+      </slot>
+    </sl-tab-panel>
+  </sl-tab-group>
+</template>
+<script setup lang="ts">
+import { toRef } from 'vue'
+import ClientTreeList from '@/views/clients/ClientTreeList.vue'
+import SecretTreeList from '@/views/secrets/SecretTreeList.vue'
+import AuditFilters from '@/components/audit/AuditFilters.vue'
+
+const props = defineProps<{ selectedTab: string }>()
+const selectedTab = toRef(() => props.selectedTab)
+const emit = defineEmits<{ (e: 'change', data: string): void }>()
+</script>
diff --git a/packages/sshecret-frontend/src/components/common/TreeItemSkeleton.vue b/packages/sshecret-frontend/src/components/common/TreeItemSkeleton.vue
new file mode 100644
index 0000000..f2a90a7
--- /dev/null
+++ b/packages/sshecret-frontend/src/components/common/TreeItemSkeleton.vue
@@ -0,0 +1,15 @@
+<template>
+  <sl-tree-item>
+    <sl-skeleton effect="sheen" class="tree-icon-skeleton"></sl-skeleton>
+    <sl-skeleton effect="sheen" class="tree-item-skeleton"></sl-skeleton>
+  </sl-tree-item>
+</template>
+<style>
+sl-skeleton.tree-icon-skeleton {
+  width: 1rem;
+  margin-right: 1rem;
+}
+sl-skeleton.tree-item-skeleton {
+  width: 6rem;
+}
+</style>
diff --git a/packages/sshecret-frontend/src/components/secrets/SecretSkeleton.vue b/packages/sshecret-frontend/src/components/secrets/SecretSkeleton.vue
index 81df189..cdc1c65 100644
--- a/packages/sshecret-frontend/src/components/secrets/SecretSkeleton.vue
+++ b/packages/sshecret-frontend/src/components/secrets/SecretSkeleton.vue
@@ -1,43 +1,71 @@
 <template>
-  <div
-    role="status"
-    class="w-full p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded-sm shadow-sm animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700"
-  >
-    <div class="flex items-center justify-between">
-      <div>
-        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-        <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+  <sl-tab-group>
+    <sl-tab slot="nav" panel="skeleton"><sl-skeleton></sl-skeleton></sl-tab>
+
+    <sl-tab-panel name="skeleton">
+      <div id="client_details">
+        <div class="w-full p-2">
+          <div class="px-4 sm:px-0">
+            <h3 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">
+              <sl-skeleton effect="pulse"></sl-skeleton>
+            </h3>
+            <p class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-100">
+              <sl-skeleton effect="pulse"></sl-skeleton>
+            </p>
+          </div>
+          <div class="mt-6 border-t border-gray-100">
+            <dl class="divide-y divide-gray-100">
+              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">
+                  <sl-skeleton effect="pulse"></sl-skeleton>
+                </dt>
+                <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">
+                  <sl-skeleton effect="pulse"></sl-skeleton>
+                </dd>
+              </div>
+              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">
+                  <sl-skeleton effect="pulse"></sl-skeleton>
+                </dt>
+                <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">
+                  <sl-skeleton effect="pulse"></sl-skeleton>
+                </dd>
+              </div>
+
+              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">
+                  <sl-skeleton effect="pulse"></sl-skeleton>
+                </dt>
+                <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">
+                  <sl-skeleton effect="pulse"></sl-skeleton>
+                </dd>
+              </div>
+
+              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">
+                  <sl-skeleton effect="pulse"></sl-skeleton>
+                </dt>
+                <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">
+                  <sl-skeleton effect="pulse"></sl-skeleton>
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </div>
       </div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
-    </div>
-    <div class="flex items-center justify-between pt-4">
-      <div>
-        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-        <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-      </div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
-    </div>
-    <div class="flex items-center justify-between pt-4">
-      <div>
-        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-        <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-      </div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
-    </div>
-    <div class="flex items-center justify-between pt-4">
-      <div>
-        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-        <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-      </div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
-    </div>
-    <div class="flex items-center justify-between pt-4">
-      <div>
-        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-        <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-      </div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
-    </div>
-    <span class="sr-only">Loading...</span>
-  </div>
+    </sl-tab-panel>
+  </sl-tab-group>
 </template>
+
+<style scoped>
+  sl-tab sl-skeleton {
+    width: 30%;
+  }
+  h3 sl-skeleton {
+    width: 15rem;
+  }
+
+  p sl-skeleton {
+    width: 10rem;
+  }
+</style>
diff --git a/packages/sshecret-frontend/src/main.ts b/packages/sshecret-frontend/src/main.ts
index c526723..9f8480b 100644
--- a/packages/sshecret-frontend/src/main.ts
+++ b/packages/sshecret-frontend/src/main.ts
@@ -30,6 +30,8 @@ import '@shoelace-style/shoelace/dist/components/option/option.js'
 import '@shoelace-style/shoelace/dist/components/range/range.js'
 import '@shoelace-style/shoelace/dist/components/select/select.js'
 import '@shoelace-style/shoelace/dist/components/skeleton/skeleton.js'
+import '@shoelace-style/shoelace/dist/components/spinner/spinner.js'
+
 import '@shoelace-style/shoelace/dist/components/tab-group/tab-group.js'
 import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js'
 import '@shoelace-style/shoelace/dist/components/tab/tab.js'
diff --git a/packages/sshecret-frontend/src/router/index.ts b/packages/sshecret-frontend/src/router/index.ts
index ccefc05..7588a14 100644
--- a/packages/sshecret-frontend/src/router/index.ts
+++ b/packages/sshecret-frontend/src/router/index.ts
@@ -2,8 +2,15 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 import LoginPage from '@/views/LoginPage.vue'
 import WorkspaceView from '@/views/WorkspaceView.vue'
-import AuditView from '@/views/audit/AuditView.vue'
+import AuditPage from '@/views/audit/AuditPage.vue'
+import ClientPage from '@/views/clients/ClientPage.vue'
+import SecretPage from '@/views/secrets/SecretPage.vue'
+import ClientDetailPage from '@/views/clients/ClientDetailPage.vue'
+import SecretDetailView from '@/views/secrets/SecretDetailView.vue'
+import SecretGroupDetailView from '@/views/secrets/SecretGroupDetailView.vue'
+import GenericDetail from '@/components/common/GenericDetail.vue'
 import { useAuthTokenStore } from '@/store/auth'
+import { reassemblePath } from '@/api/paths'
 
 
 const routes = [
@@ -15,7 +22,55 @@ const routes = [
     meta: { requiresAuth: true },
   },
   {
-    path: '/audit', name: 'audit', component: AuditView, meta: { requiresAuth: true },
+    path: '/audit', name: 'audit', component: AuditPage, meta: { requiresAuth: true }
+  },
+  {
+    path: '/clients', component: ClientPage, meta: { requiresAuth: true }, children: [
+      {
+        path: '', component: GenericDetail, name: 'clients', meta: { requiresAuth: true },
+      },
+      {
+        name: 'Client',
+        path: ':id',
+        component: ClientDetailPage,
+        props: true,
+        meta: { requiresAuth: true },
+
+      },
+      {
+        name: 'ClientSecret',
+        path: ':parentId/:id',
+        component: SecretDetailView,
+        props: true,
+        meta: { requiresAuth: true },
+      },
+    ]
+  },
+  {
+    path: '/secrets', component: SecretPage, meta: { requiresAuth: true }, children: [
+      {
+        path: '', component: GenericDetail, name: 'secrets',
+        meta: { requiresAuth: true },
+
+      },
+      {
+        name: 'Secret',
+        path: ':id',
+        component: SecretDetailView,
+        props: true,
+        meta: { requiresAuth: true },
+
+      },
+      {
+        name: 'Group',
+        path: '/group/:groupPath(.*)*',
+        component: SecretGroupDetailView,
+        props: route => ({
+          groupPath: Array.isArray(route.params.groupPath) ? reassemblePath(route.params.groupPath) : route.params.groupPath || ''
+        }),
+        meta: { requiresAuth: true },
+      }
+    ],
   }
 ]
 
diff --git a/packages/sshecret-frontend/src/store/useTreeState.ts b/packages/sshecret-frontend/src/store/useTreeState.ts
index 1ffc4c3..0325ff7 100644
--- a/packages/sshecret-frontend/src/store/useTreeState.ts
+++ b/packages/sshecret-frontend/src/store/useTreeState.ts
@@ -20,6 +20,22 @@ export const useTreeState = defineStore('treeState', {
     selectClient(id: string) {
       this.selected = { objectType: SshecretObjectType.Client, id: id }
     },
+    /*
+     * Fetch and select a specific client.
+     */
+    async loadClientName(name: string) {
+      const existing = this.clients?.clients.find(c => c.name === name)
+      if (existing) {
+        this.selected = { objectType: SshecretObjectType.Client, id: existing.id, param: name }
+      } else {
+        const result = await this.queryClients(name, 0, 1)
+        if (result === 1 && this.clients) {
+          this.selected = { objectType: SshecretObjectType.Client, id: this.clients.clients[0].id, param: name }
+        } else {
+          throw new Error("The selected client could not be found.")
+        }
+      }
+    },
     selectSecret(name: string, parent?: string) {
       this.selected = { objectType: SshecretObjectType.ClientSecret, id: name }
       if (parent) {
diff --git a/packages/sshecret-frontend/src/views/WorkspaceView.vue b/packages/sshecret-frontend/src/views/WorkspaceView.vue
index 2e0816c..600a53d 100644
--- a/packages/sshecret-frontend/src/views/WorkspaceView.vue
+++ b/packages/sshecret-frontend/src/views/WorkspaceView.vue
@@ -1,93 +1,6 @@
 <template>
-  <MasterDetail>
-    <template #master>
-      <sl-tab-group
-        id="sideTabs"
-        class="flex flex-col flex-1 h-full overflow-hidden master-pane-tabs"
-        @sl-tab-show="tabSelected($event)"
-      >
-        <sl-tab slot="nav" panel="clients">Clients</sl-tab>
-        <sl-tab slot="nav" panel="secrets">Secrets</sl-tab>
-        <sl-tab slot="nav" panel="audit">Audit</sl-tab>
-        <sl-tab-panel name="clients">
-          <ClientTreeList />
-        </sl-tab-panel>
-        <sl-tab-panel name="secrets">
-          <SecretTreeList />
-        </sl-tab-panel>
-        <sl-tab-panel name="audit">
-          <AuditFilters />
-        </sl-tab-panel>
-      </sl-tab-group>
-    </template>
-    <template #detail v-if="showAudit">
-      <AuditView />
-    </template>
-    <template #detail v-else>
-      <template v-if="treeState.selected">
-        <ClientDetailView
-          v-if="treeState.selected.objectType === SshecretObjectType.Client"
-          :clientId="treeState.selected.id"
-          :key="treeState.selected.id"
-        />
-        <SecretDetailView
-          v-else-if="treeState.selected.objectType === SshecretObjectType.ClientSecret"
-          :secretName="treeState.selected.id"
-          :parentId="null"
-          :key="treeState.selected.id"
-        />
-        <SecretGroupDetailView
-          v-else-if="
-            treeState.selected.objectType === SshecretObjectType.SecretGroup &&
-            treeState.selected.id != 'ungrouped'
-          "
-          :groupPath="treeState.selected.id"
-          :key="treeState.selected.id"
-        />
-      </template>
-    </template>
-  </MasterDetail>
+  <MasterDetailWorkspace />
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
-import AuditView from '@/views/audit/AuditView.vue'
-import MasterDetail from '@/views/layout/MasterDetail.vue'
-import ClientTreeList from '@/views/clients/ClientTreeList.vue'
-import SecretTreeList from '@/views/secrets/SecretTreeList.vue'
-import ClientDetailView from '@/views/clients/ClientDetailView.vue'
-import SecretDetailView from '@/views/secrets/SecretDetailView.vue'
-import SecretGroupDetailView from '@/views/secrets/SecretGroupDetailView.vue'
-
-import AuditFilters from '@/components/audit/AuditFilters.vue'
-import { SshecretObjectType } from '@/api/types'
-import { useAuditFilterState } from '@/store/useAuditFilterState'
-import { useTreeState } from '@/store/useTreeState'
-
-const treeState = useTreeState()
-
-const auditFilterState = useAuditFilterState()
-
-const showAudit = ref<{ boolean }>()
-
-function tabSelected(tab) {
-  const tabName = tab.detail.name
-  if (tabName == 'audit') {
-    console.log('Showing audit')
-    treeState.showAudit = true
-    showAudit.value = true
-  } else {
-    treeState.showAudit = false
-    showAudit.value = false
-  }
-}
+import MasterDetailWorkspace from '@/components/common/MasterDetailWorkspace.vue'
 </script>
-
-<style>
-sl-tab-group.master-pane-tabs::part(base),
-sl-tab-group.master-pane-tabs::part(body),
-sl-tab-group.master-pane-tabs sl-tab-panel::part(base),
-sl-tab-group.master-pane-tabs sl-tab-panel::part(body),
-sl-tab-group.master-pane-tabs sl-tab-panel {
-  height: 100%;
-}
-</style>
diff --git a/packages/sshecret-frontend/src/views/audit/AuditPage.vue b/packages/sshecret-frontend/src/views/audit/AuditPage.vue
new file mode 100644
index 0000000..9ec6b6d
--- /dev/null
+++ b/packages/sshecret-frontend/src/views/audit/AuditPage.vue
@@ -0,0 +1,29 @@
+<template>
+  <MasterDetail>
+    <template #master>
+      <MasterTabs selectedTab="audit" @change="tabSelected" />
+    </template>
+    <template #detail>
+      <AuditView />
+    </template>
+  </MasterDetail>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import AuditView from '@/views/audit/AuditView.vue'
+import MasterDetail from '@/views/layout/MasterDetail.vue'
+import MasterTabs from '@/components/common/MasterTabs.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { RouterView } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+function tabSelected(tabName: string) {
+  if (tabName !== 'audit') {
+    router.push({ name: tabName })
+  }
+}
+
+const routeKey = computed(() => route.name + '-' + (route.params.id ?? 'root'))
+</script>
diff --git a/packages/sshecret-frontend/src/views/audit/AuditView.vue b/packages/sshecret-frontend/src/views/audit/AuditView.vue
index a16dea3..d4922d6 100644
--- a/packages/sshecret-frontend/src/views/audit/AuditView.vue
+++ b/packages/sshecret-frontend/src/views/audit/AuditView.vue
@@ -2,10 +2,14 @@
   <template v-if="loaded">
     <AuditTable :auditFilter="auditFilter" />
   </template>
+  <template v-else>
+    <AuditSkeleton />
+  </template>
 </template>
 <script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
 import AuditTable from '@/components/audit/AuditTable.vue'
+import AuditSkeleton from '@/components/audit/AuditSkeleton.vue'
 import type { AuditFilter } from '@/api/types'
 import type { GetAuditLogApiV1AuditGetData } from '@/client'
 import { useAuditFilterState } from '@/store/useAuditFilterState'
@@ -13,10 +17,10 @@ const auditFilterState = useAuditFilterState()
 const auditFilter = ref<GetAuditLogApiV1AuditGetData['query']>({})
 
 watch(auditFilterState, () => (auditFilter.value = auditFilterState.getFilter))
-const loaded = ref<{ boolean }>()
+const loaded = ref<{ boolean }>(false)
 
 onMounted(() => {
-  loaded.value = true
   auditFilter.value = auditFilterState.getFilter
+  loaded.value = true
 })
 </script>
diff --git a/packages/sshecret-frontend/src/views/clients/ClientDetailPage.vue b/packages/sshecret-frontend/src/views/clients/ClientDetailPage.vue
new file mode 100644
index 0000000..cb3b393
--- /dev/null
+++ b/packages/sshecret-frontend/src/views/clients/ClientDetailPage.vue
@@ -0,0 +1,24 @@
+<template>
+  <ClientDetailView :id="clientId" :parentId="parentId" @clientDeleted="onClientDelete" />
+</template>
+<script setup lang="ts">
+import { toRef } from 'vue'
+import ClientDetailView from '@/views/clients/ClientDetailView.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useTreeState } from '@/store/useTreeState'
+
+const props = defineProps<{ id: string | null; parentId: string | null }>()
+const router = useRouter()
+const clientId = toRef(() => props.id)
+const parentId = toRef(() => props.parentId)
+
+const treeState = useTreeState()
+
+async function onClientDelete(id: string) {
+  // React when a client is deleted
+
+  console.log('Client deleted')
+  await treeState.loadClients()
+  router.push({ name: 'clients' })
+}
+</script>
diff --git a/packages/sshecret-frontend/src/views/clients/ClientDetailView.vue b/packages/sshecret-frontend/src/views/clients/ClientDetailView.vue
index a840df8..cc325ed 100644
--- a/packages/sshecret-frontend/src/views/clients/ClientDetailView.vue
+++ b/packages/sshecret-frontend/src/views/clients/ClientDetailView.vue
@@ -1,44 +1,54 @@
 <template>
-  <ClientDetail :client="client" @update="updateClient" @deleted="deleteClient" v-if="client" />
+  <ClientDetail
+    :client="client"
+    @update="updateClient"
+    @deleted="deleteClient"
+    v-if="client"
+    :key="clientId"
+  />
   <ClientSkeleton v-else />
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue'
+import { ref, toRef, watch, onMounted } from 'vue'
 import ClientSkeleton from '@/components/clients/ClientSkeleton.vue'
 import ClientDetail from '@/components/clients/ClientDetail.vue'
 import type { ClientCreate } from '@/client'
+import { idKey } from '@/api/paths'
 import { SshecretAdmin } from '@/client'
 import { useTreeState } from '@/store/useTreeState'
 
-const props = defineProps<{ clientId: string | null }>()
+const props = defineProps<{ id: string | null; parentId: string | null }>()
+
+const clientId = toRef(() => props.id)
 
 const client = ref<Client>()
 
 const treeState = useTreeState()
 
+const emit = defineEmits<{ (e: 'clientDeleted', data: string): void }>()
+
 async function loadClient() {
-  if (!props.clientId) return
-  client.value = await treeState.getClient()
+  console.log('loadClient called: ', props.id)
+  if (!props.id) return
+  client.value = await treeState.getClient(props.id)
 }
 
-async function deleteClient(clientId: string) {
-  console.log(`Delete ${localClient.value.id}`)
+async function deleteClient(deleteId: string) {
   const response = await SshecretAdmin.deleteClientApiV1ClientsIdDelete({
-    path: { id: clientId },
+    path: { id: idKey(deleteId) },
   })
   if (response.status !== 200) {
     console.error(response)
     return
   }
 
-  emit('clientDeleted', clientId)
-  props.clientId = null
+  emit('clientDeleted', deleteId)
 }
 
 async function updateClient(updated: ClientCreate) {
   const response = await SshecretAdmin.updateClientApiV1ClientsIdPut({
-    path: { id: localClient.value.id },
+    path: { id: idKey(localClient.value.id) },
     body: data,
   })
   client.value = response.data
@@ -47,7 +57,7 @@ async function updateClient(updated: ClientCreate) {
 onMounted(loadClient)
 
 watch(
-  () => props.client_id,
+  () => props.id,
   () => loadClient(),
   { immediate: true },
 )
diff --git a/packages/sshecret-frontend/src/views/clients/ClientPage.vue b/packages/sshecret-frontend/src/views/clients/ClientPage.vue
new file mode 100644
index 0000000..0caf3c1
--- /dev/null
+++ b/packages/sshecret-frontend/src/views/clients/ClientPage.vue
@@ -0,0 +1,29 @@
+<template>
+  <MasterDetail>
+    <template #master>
+      <MasterTabs selectedTab="clients" @change="tabSelected" />
+    </template>
+    <template #detail>
+      <RouterView :key="routeKey" />
+    </template>
+  </MasterDetail>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import MasterDetail from '@/views/layout/MasterDetail.vue'
+import MasterTabs from '@/components/common/MasterTabs.vue'
+import ClientDetailView from '@/views/clients/ClientDetailView.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { RouterView } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+function tabSelected(tabName: string) {
+  if (tabName !== 'clients') {
+    router.push({ name: tabName })
+  }
+}
+
+const routeKey = computed(() => route.name + '-' + (route.params.id ?? 'root'))
+</script>
diff --git a/packages/sshecret-frontend/src/views/clients/ClientTreeList.vue b/packages/sshecret-frontend/src/views/clients/ClientTreeList.vue
index 51ec41a..758f2be 100644
--- a/packages/sshecret-frontend/src/views/clients/ClientTreeList.vue
+++ b/packages/sshecret-frontend/src/views/clients/ClientTreeList.vue
@@ -44,6 +44,11 @@
             </ClientTreeItem>
           </template>
         </sl-tree>
+        <sl-tree class="w-full" v-else>
+          <template v-for="n in 20">
+            <TreeItemSkeleton />
+          </template>
+        </sl-tree>
       </div>
       <div
         class="shrink-0 mt-4 pt-2 border-t border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-800"
@@ -88,7 +93,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, reactive, onMounted, watch } from 'vue'
+import { computed, ref, reactive, toRef, onMounted, watch, nextTick } from 'vue'
 import type { Ref } from 'vue'
 
 import { usePagination } from '@/composables/usePagination'
@@ -98,11 +103,13 @@ import { SshecretAdmin } from '@/client/sdk.gen'
 import type { Client, ClientCreate } from '@/client/types.gen'
 
 import { useTreeState } from '@/store/useTreeState'
+import { useRouter, useRoute } from 'vue-router'
 
 import ClientTreeItem from '@/components/clients/ClientTreeItem.vue'
 import ClientSecretTreeItem from '@/components/clients/ClientSecretTreeItem.vue'
 import ClientForm from '@/components/clients/ClientForm.vue'
 import PageNumbers from '@/components/common/PageNumbers.vue'
+import TreeItemSkeleton from '@/components/common/TreeItemSkeleton.vue'
 
 import { useDebounce } from '@/composables/useDebounce'
 const treeState = useTreeState()
@@ -117,7 +124,15 @@ const selectedSecret = ref<string | null>(null)
 const createFormKey = ref<number>(0)
 const createDrawerOpen = ref<boolean>(false)
 
-const clientQuery = ref('')
+const props = defineProps({
+  loadClient: {
+    type: String,
+    default: '',
+  },
+})
+const router = useRouter()
+
+const clientQuery = toRef(() => props.loadClient)
 
 const debouncedQuery = useDebounce(clientQuery, 300)
 
@@ -134,49 +149,43 @@ async function loadClients() {
 
 function updateClient(updated: Client) {
   const index = clients.value.findIndex((c) => c.name === updated.name)
-  console.log(`UpdateClient fired: ${updated.name} => ${index}`)
   if (index >= 0) {
     clients.value[index] = updated
   }
 }
-
 function itemSelected(event: Event) {
-  if (event.detail.selection.length == 0) {
-    treeState.unselect()
-  } else {
+  if (event.detail.selection) {
     const el = event.detail.selection[0] as HTMLElement
     const childType = el.dataset.type
     if (childType === 'client') {
-      const clientId = el.dataset.clientId
-      treeState.selectClient(clientId)
-    } else if (childType == 'secret') {
-      const secretName = el.dataset.name
+      router.push({ name: 'Client', params: { id: el.dataset.clientId } })
+    } else {
+      const secretId = el.dataset.name
       const parentId = el.dataset.parentId
-      treeState.selectSecret(secretName, parentId)
+      console.log(el.dataset)
+      router.push({
+        name: 'ClientSecret',
+        params: { parentId: el.dataset.parentId, id: el.dataset.name },
+      })
     }
   }
 }
 
 async function createClient(data: ClientCreate) {
   const response = await SshecretAdmin.createClientApiV1ClientsPost({ body: data })
-  console.log(response.data)
   clients.value.unshift(response.data)
   totalClients.value += 1
   createDrawerOpen.value = false
   createFormKey.value += 1
-  treeState.value.selected = true
-  treeState.value.item_type = 'secret'
-  treeState.value.client = response.data
+  treeState.selectClient(response.data.id)
+  router.push({ name: 'Client', params: { id: response.data.id } })
 }
 
 async function clientDeleted(id: string) {
   const index = clients.value.findIndex((c) => c.id === id)
-  console.log(`Client Deleted event received: ID: ${id} => ${index}`)
   if (index >= 0) {
     clients.value.splice(index, 1)
-    treeState.value.selected = false
-    treeState.value.item_type = null
-    treeState.value.client = null
+    treeState.unselect()
     await loadClients()
   }
 }
@@ -196,7 +205,6 @@ async function clearSearch() {
 
 // Watch the search query
 watch(debouncedQuery, async () => {
-  console.log('Handling search event.')
   await handleSearchEvent()
 })
 
diff --git a/packages/sshecret-frontend/src/views/layout/MasterDetail.vue b/packages/sshecret-frontend/src/views/layout/MasterDetail.vue
index 28ecbb7..03e155b 100644
--- a/packages/sshecret-frontend/src/views/layout/MasterDetail.vue
+++ b/packages/sshecret-frontend/src/views/layout/MasterDetail.vue
@@ -26,7 +26,7 @@
       <section id="detail-pane" class="flex-1 flex overflow-y-auto bg-white p-4 dark:bg-gray-800">
         <div class="flex flex-col w-full">
           <slot name="detail">
-            <p class="p-4 text-gray-500 dark:text-gray-200">Select an item to view details</p>
+            <GenericDetail />
           </slot>
         </div>
       </section>
@@ -38,6 +38,7 @@
 import { ref } from 'vue'
 import '@shoelace-style/shoelace/dist/components/icon/icon.js'
 import Navbar from '@/components/layout/Navbar.vue'
+import GenericDetail from '@/components/common/GenericDetail.vue'
 
 const masterHidden = ref(true)
 </script>
diff --git a/packages/sshecret-frontend/src/views/secrets/SecretDetailView.vue b/packages/sshecret-frontend/src/views/secrets/SecretDetailView.vue
index e18f9c4..659eb6f 100644
--- a/packages/sshecret-frontend/src/views/secrets/SecretDetailView.vue
+++ b/packages/sshecret-frontend/src/views/secrets/SecretDetailView.vue
@@ -1,13 +1,15 @@
 <template>
-  <SecretDetail
-    :secret="secret"
-    @update="updateSecretValue"
-    @delete="deleteSecret"
-    @addClient="addSecretToClient"
-    @removeClient="removeClientSecret"
-    v-if="secret"
-  />
-  <SecretSkeleton v-else />
+  <div>
+    <SecretDetail
+      :secret="secret"
+      @update="updateSecretValue"
+      @delete="deleteSecret"
+      @addClient="addSecretToClient"
+      @removeClient="removeClientSecret"
+      v-if="secret"
+    />
+    <SecretSkeleton v-else />
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
@@ -18,21 +20,21 @@ import { useTreeState } from '@/store/useTreeState'
 import type { SecretView } from '@/client/types.gen.ts'
 import { SshecretAdmin } from '@/client'
 
-const props = defineProps<{ secretName: string | null; parentId: string | null }>()
+const props = defineProps<{ id: string | null; parentId: string | null }>()
 const secret = ref<SecretView>()
 
 const treeState = useTreeState()
 
 async function loadSecret() {
-  if (!props.secretName) return
-  secret.value = await treeState.getSecret(props.secretName)
+  if (!props.id) return
+  secret.value = await treeState.getSecret(props.id)
 }
 
 async function updateSecretValue(value: string) {
   // Update a secret value
   await SshecretAdmin.updateSecretApiV1SecretsNamePut({
     path: {
-      name: props.secretName,
+      name: props.id,
     },
     body: {
       value: value,
@@ -46,8 +48,8 @@ async function updateSecretValue(value: string) {
 
 async function deleteSecret(clients: string[]) {
   // Delete the whole secret
-  if (props.secretName) {
-    await SshecretAdmin.deleteSecretApiV1SecretsNameDelete({ path: { name: props.secretName } })
+  if (props.id) {
+    await SshecretAdmin.deleteSecretApiV1SecretsNameDelete({ path: { name: props.id } })
     for (const clientId in clients) {
       await treeState.refreshClient(clientId)
     }
@@ -55,12 +57,11 @@ async function deleteSecret(clients: string[]) {
 }
 
 async function addSecretToClient(clientId: string) {
-  if (props.secretName) {
-    console.log('Add Secret to client', props.secretName, clientId)
+  if (props.id) {
     await SshecretAdmin.addSecretToClientApiV1ClientsIdSecretsSecretNamePut({
       path: {
         id: clientId,
-        secret_name: props.secretName,
+        secret_name: props.id,
       },
     })
     await treeState.refreshClient(clientId)
@@ -69,11 +70,11 @@ async function addSecretToClient(clientId: string) {
 }
 
 async function removeClientSecret(clientId: string) {
-  if (props.secretName) {
+  if (props.id) {
     await SshecretAdmin.deleteSecretFromClientApiV1ClientsIdSecretsSecretNameDelete({
       path: {
         id: clientId,
-        secret_name: props.secretName,
+        secret_name: props.id,
       },
     })
     await treeState.refreshClient(clientId)
@@ -83,7 +84,7 @@ async function removeClientSecret(clientId: string) {
 onMounted(loadSecret)
 
 watch(
-  () => props.secretName,
+  () => props.id,
   () => loadSecret(),
   { immediate: true },
 )
diff --git a/packages/sshecret-frontend/src/views/secrets/SecretGroupDetailView.vue b/packages/sshecret-frontend/src/views/secrets/SecretGroupDetailView.vue
index cfbce2e..33000d6 100644
--- a/packages/sshecret-frontend/src/views/secrets/SecretGroupDetailView.vue
+++ b/packages/sshecret-frontend/src/views/secrets/SecretGroupDetailView.vue
@@ -1,6 +1,12 @@
 <template>
-  <GroupDetail :group="group" v-if="group" />
-  <ClientSkeleton v-else />
+  <div>
+    <Transition name="fade" :css="false">
+      <div>
+        <GroupDetail :group="group" v-if="group" />
+        <ClientSkeleton v-else />
+      </div>
+    </Transition>
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
diff --git a/packages/sshecret-frontend/src/views/secrets/SecretPage.vue b/packages/sshecret-frontend/src/views/secrets/SecretPage.vue
new file mode 100644
index 0000000..c721235
--- /dev/null
+++ b/packages/sshecret-frontend/src/views/secrets/SecretPage.vue
@@ -0,0 +1,32 @@
+<template>
+  <MasterDetail>
+    <template #master>
+      <MasterTabs selectedTab="secrets" @change="tabSelected" />
+    </template>
+    <template #detail>
+      <RouterView v-slot="{ Component, route }">
+        <transition name="fade" :css="false">
+          <component :is="Component" :key="route.path" />
+        </transition>
+      </RouterView>
+    </template>
+  </MasterDetail>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import MasterDetail from '@/views/layout/MasterDetail.vue'
+import MasterTabs from '@/components/common/MasterTabs.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { RouterView } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+function tabSelected(tabName: string) {
+  if (tabName !== 'secrets') {
+    router.push({ name: tabName })
+  }
+}
+
+const routeKey = computed(() => route.name + '-' + (route.params.id ?? 'root'))
+</script>
diff --git a/packages/sshecret-frontend/src/views/secrets/SecretTreeList.vue b/packages/sshecret-frontend/src/views/secrets/SecretTreeList.vue
index 84e3aa5..8e352a1 100644
--- a/packages/sshecret-frontend/src/views/secrets/SecretTreeList.vue
+++ b/packages/sshecret-frontend/src/views/secrets/SecretTreeList.vue
@@ -34,6 +34,11 @@
               <SecretGroup v-for="group in secretGroups" :group="group" />
             </template>
           </sl-tree>
+          <sl-tree v-else>
+            <template v-for="n in 10">
+              <TreeItemSkeleton />
+            </template>
+          </sl-tree>
         </div>
         <!-- pagination would go here -->
       </div>
@@ -60,17 +65,21 @@
 import type { SshecretObject } from '@/api/types'
 import type { SecretCreate } from '@/client'
 import { computed, ref, reactive, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { useTreeState } from '@/store/useTreeState'
 import { useAlertsStore } from '@/store/useAlertsStore'
 import { SshecretAdmin } from '@/client'
 import { SshecretObjectType } from '@/api/types'
+import { splitPath } from '@/api/paths'
 import SecretGroup from '@/components/secrets/SecretGroup.vue'
 import SecretGroupTreeItem from '@/components/secrets/SecretGroupTreeItem.vue'
 import SecretGroupTreeEntry from '@/components/secrets/SecretGroupTreeEntry.vue'
 import AddGroup from '@/components/secrets/AddGroup.vue'
 import SecretForm from '@/components/secrets/SecretForm.vue'
 import Drawer from '@/components/common/Drawer.vue'
+import TreeItemSkeleton from '@/components/common/TreeItemSkeleton.vue'
 
+const router = useRouter()
 const treeState = useTreeState()
 const alerts = useAlertsStore()
 
@@ -126,12 +135,15 @@ async function itemSelected(event: Event) {
     if (childType === 'secret') {
       const secretName = el.dataset.name
       treeState.selectSecret(secretName, null)
+      router.push({ name: 'Secret', params: { id: secretName } })
     } else if (childType === 'group') {
       const groupPath = el.dataset.groupPath
       if (groupPath === 'ungrouped') {
         treeState.unselect()
       } else {
+        const groupPathElements = splitPath(groupPath)
         treeState.selectGroup(groupPath)
+        router.push({ name: 'Group', params: { groupPath: groupPathElements } })
       }
     }
   }
@@ -139,14 +151,12 @@ async function itemSelected(event: Event) {
 
 async function createGroup(path: string) {
   // Create a group
-  console.log('Submit called')
   const response = await SshecretAdmin.addSecretGroupApiV1SecretsGroupsPost({
     body: {
       name: path,
     },
   })
   if (response.status === 200) {
-    console.log('Success. Group created.')
     alerts.showAlert('Group created', 'success')
     createGroupDrawer.value = false
     drawerKey.value += 1
@@ -159,7 +169,6 @@ async function createGroup(path: string) {
 }
 
 async function createSecret(secretCreate: SecretCreate) {
-  console.log('Creating secret')
   const response = await SshecretAdmin.addSecretApiV1SecretsPost({
     body: secretCreate,
   })
@@ -172,13 +181,12 @@ async function createSecret(secretCreate: SecretCreate) {
     await loadGroups()
     // Also update all the clients affected
     for (const clientId in secretCreate.clients) {
-      console.log('Refreshing client: ', clientId)
       await treeState.refreshClient(clientId)
     }
 
     treeState.selectSecret(secretCreate.name)
   } else {
-    console.log(response)
+    console.error(response)
     alerts.showAlert('Secret creation failed', 'error')
   }
 }