Improved profile view layout.

frontend/src/assets/style.css

@@ -34,7 +34,7 @@
   --space-lg: 1.5rem;
   --space-xl: 2.25rem;
   --space-xxl: 3.5rem;
-  --layout-max-width: 1080px;
+  --layout-max-width: 1400px;
   --layout-padding: clamp(1.5rem, 3vw + 1rem, 3.25rem);
   --transition-base: 160ms ease;
 }
@@ -444,18 +444,11 @@ th {
   width: 100%;
   display: grid;
   grid-auto-flow: row;
-  grid-template-columns: repeat(auto-fit, var(--card-width));
+  grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
   justify-content: start;
   gap: 1rem 1.25rem;
   align-items: stretch;
   margin: 0 auto;
-  max-width: calc(var(--card-width) * 4 + 3 * 1.25rem);
-}
-
-@media (max-width: 1100px) {
-  .record-list,
-  .credential-list,
-  .session-list { max-width: calc(var(--card-width) * 3 + 2 * 1.25rem); }
 }
 
 @media (max-width: 720px) {

frontend/src/components/SessionList.vue

@@ -7,33 +7,37 @@
     <div class="section-body">
       <div :class="['session-list']">
         <template v-if="Array.isArray(sessions) && sessions.length">
-          <div
-            v-for="session in sessions"
-            :key="session.id"
-            :class="['session-item', { 'is-current': session.is_current }]"
-          >
-            <div class="item-top">
-              <div class="item-icon">
-                <span class="session-emoji">🌐</span>
-              </div>
-              <h4 class="item-title">{{ sessionHostLabel(session) }}</h4>
-              <div class="item-actions">
-                <span v-if="session.is_current" class="badge badge-current">Current</span>
-                <span v-else-if="session.is_current_host" class="badge">This host</span>
-                <button
-                  v-if="allowTerminate"
-                  @click="$emit('terminate', session)"
-                  class="btn-card-delete"
-                  :disabled="isTerminating(session.id)"
-                  :title="isTerminating(session.id) ? 'Terminating...' : 'Terminate session'"
-                >🗑️</button>
-              </div>
-            </div>
-            <div class="item-details">
-              <div class="session-dates">
-                <span class="date-label">Last used:</span>
-                <span class="date-value">{{ formatDate(session.last_renewed) }}</span>
-                <span class="session-meta-info">{{ session.user_agent }} {{ session.ip }}</span>
+          <div v-for="(group, host) in groupedSessions" :key="host" class="session-group">
+            <h3 :class="['session-group-host', { 'is-current-site': group.isCurrentSite }]">
+              <template v-if="host"><a :href="hostUrl(host)">🌐 {{ host }}</a></template>
+              <template v-else>🌐 Unbound host</template>
+            </h3>
+            <div class="session-group-sessions">
+              <div
+                v-for="session in group.sessions"
+                :key="session.id"
+                :class="['session-item', { 'is-current': session.is_current }]"
+              >
+                <div class="item-top">
+                  <h4 class="item-title">{{ session.user_agent }}</h4>
+                  <div class="item-actions">
+                    <span v-if="session.is_current" class="badge badge-current">Current</span>
+                    <span v-else-if="isSameNetwork(session.ip)" class="badge">Same IP</span>
+                    <button
+                      v-if="allowTerminate"
+                      @click="$emit('terminate', session)"
+                      class="btn-card-delete"
+                      :disabled="isTerminating(session.id)"
+                      :title="isTerminating(session.id) ? 'Terminating...' : 'Terminate session'"
+                    >🗑️</button>
+                  </div>
+                </div>
+                <div class="item-details">
+                  <div class="session-dates">
+                    <span class="date-label">{{ formatDate(session.last_renewed) }}</span>
+                    <span class="date-value">{{ session.ip }}</span>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -45,7 +49,7 @@
 </template>
 
 <script setup>
-import { } from 'vue'
+import { computed } from 'vue'
 import { formatDate } from '@/utils/helpers'
 
 const props = defineProps({
@@ -60,14 +64,113 @@ const emit = defineEmits(['terminate'])
 
 const isTerminating = (sessionId) => !!props.terminatingSessions[sessionId]
 
-const sessionHostLabel = (session) => {
-  if (!session || !session.host) return 'Unbound host'
-  return session.host
+const hostUrl = (host) => {
+  // Assume http if there's a port number, https otherwise
+  const protocol = host.includes(':') ? 'http' : 'https'
+  return `${protocol}://${host}`
 }
+
+// Extract /64 prefix for IPv6, or return full IP for IPv4
+const getNetworkPrefix = (ip) => {
+  if (!ip) return null
+  // Check if IPv6 (contains colon)
+  if (ip.includes(':')) {
+    // Expand and get first 4 groups (64 bits)
+    const parts = ip.split(':')
+    // Take first 4 parts for /64 prefix
+    return parts.slice(0, 4).join(':')
+  }
+  // IPv4 - return as-is
+  return ip
+}
+
+const currentNetworkPrefix = computed(() => {
+  const current = props.sessions.find(s => s.is_current)
+  return current ? getNetworkPrefix(current.ip) : null
+})
+
+const isSameNetwork = (ip) => {
+  if (!currentNetworkPrefix.value || !ip) return false
+  return getNetworkPrefix(ip) === currentNetworkPrefix.value
+}
+
+const groupedSessions = computed(() => {
+  const groups = {}
+  for (const session of props.sessions) {
+    const host = session.host || ''
+    if (!groups[host]) {
+      groups[host] = { sessions: [], isCurrentSite: false }
+    }
+    groups[host].sessions.push(session)
+    if (session.is_current_host) {
+      groups[host].isCurrentSite = true
+    }
+  }
+  // Sort sessions within each group by last_renewed descending
+  for (const host in groups) {
+    groups[host].sessions.sort((a, b) => new Date(b.last_renewed) - new Date(a.last_renewed))
+  }
+  // Sort groups by host name (natural sort)
+  const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' })
+  const sortedHosts = Object.keys(groups).sort(collator.compare)
+  const sortedGroups = {}
+  for (const host of sortedHosts) {
+    sortedGroups[host] = groups[host]
+  }
+  return sortedGroups
+})
 </script>
 
 <style>
 .session-meta-info {
   grid-column: span 2;
 }
+[data-component="session-list-section"] .session-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5em;
+}
+.session-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+.session-group-host {
+  font-size: 1em;
+  font-weight: 600;
+  margin: 0;
+}
+.session-group-host a {
+  color: inherit;
+  text-decoration: none;
+}
+.session-group-host a:hover {
+  text-decoration: underline;
+}
+.session-group-host.is-current-site {
+  color: var(--color-accent);
+}
+.session-group-sessions {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
+  gap: 0.5em;
+  align-items: start;
+}
+.session-group-sessions .session-item {
+  width: auto;
+  height: auto;
+  padding: 0.75rem;
+  gap: 0.5rem;
+}
+.session-group-sessions .session-item .item-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.session-group-sessions .session-item .item-details {
+  margin-left: 0;
+}
+.session-group-sessions .session-item .session-dates {
+  grid-template-columns: auto 1fr;
+}
 </style>

frontend/vite.config.js

@@ -60,7 +60,8 @@ export default defineConfig(({ command }) => ({
     proxy: {
       // Only proxy these two specific backend API paths
       '/auth/api': {
-        target: 'http://localhost:4402'
+        target: 'http://localhost:4402',
+        headers: { connection: 'close' }
       },
       '/auth/ws': {
         target: 'http://localhost:4402',