From b93fe016ed96813a6f927b16edfedb173bd70359 Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Thu, 12 Mar 2026 17:11:02 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20frontend=20=E2=80=94=20auth=20flow,=20c?=
 =?UTF-8?q?onnection=20manager=20UI,=20host=20tree?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../connections/GroupEditDialog.vue           | 103 ++++++++
 frontend/components/connections/HostCard.vue  |  97 +++++++
 .../components/connections/HostEditDialog.vue | 240 ++++++++++++++++++
 frontend/components/connections/HostTree.vue  |  97 +++++++
 frontend/layouts/default.vue                  |  28 ++
 frontend/pages/index.vue                      |  56 ++++
 frontend/pages/login.vue                      |  48 ++++
 frontend/stores/auth.store.ts                 |  44 ++++
 frontend/stores/connection.store.ts           |  98 +++++++
 9 files changed, 811 insertions(+)
 create mode 100644 frontend/components/connections/GroupEditDialog.vue
 create mode 100644 frontend/components/connections/HostCard.vue
 create mode 100644 frontend/components/connections/HostEditDialog.vue
 create mode 100644 frontend/components/connections/HostTree.vue
 create mode 100644 frontend/layouts/default.vue
 create mode 100644 frontend/pages/index.vue
 create mode 100644 frontend/pages/login.vue
 create mode 100644 frontend/stores/auth.store.ts
 create mode 100644 frontend/stores/connection.store.ts

diff --git a/frontend/components/connections/GroupEditDialog.vue b/frontend/components/connections/GroupEditDialog.vue
new file mode 100644
index 0000000..333fdef
--- /dev/null
+++ b/frontend/components/connections/GroupEditDialog.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { Dialog, InputText, Select, Button } from 'primevue'
+
+const props = defineProps<{
+  visible: boolean
+  group?: any | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', val: boolean): void
+  (e: 'saved'): void
+}>()
+
+const connections = useConnectionStore()
+
+const form = ref({
+  name: '',
+  parentId: null as number | null,
+})
+
+const saving = ref(false)
+const error = ref('')
+
+const isEdit = computed(() => !!props.group?.id)
+const title = computed(() => isEdit.value ? 'Edit Group' : 'New Group')
+
+const parentOptions = computed(() => {
+  const options = [{ label: 'No Parent (top-level)', value: null }]
+  // Flatten groups for parent selection, excluding self if editing
+  const addGroups = (groups: any[], prefix = '') => {
+    for (const g of groups) {
+      if (isEdit.value && g.id === props.group?.id) continue
+      options.push({ label: prefix + g.name, value: g.id })
+      if (g.children?.length) addGroups(g.children, prefix + g.name + ' / ')
+    }
+  }
+  addGroups(connections.groups)
+  return options
+})
+
+watch(() => props.visible, (v) => {
+  if (v) {
+    form.value = {
+      name: props.group?.name || '',
+      parentId: props.group?.parentId ?? null,
+    }
+    error.value = ''
+  }
+})
+
+async function save() {
+  error.value = ''
+  saving.value = true
+  try {
+    if (isEdit.value) {
+      await connections.updateGroup(props.group.id, form.value)
+    } else {
+      await connections.createGroup(form.value)
+    }
+    emit('saved')
+    emit('update:visible', false)
+  } catch (e: any) {
+    error.value = e.data?.message || 'Failed to save group'
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <Dialog
+    :visible="visible"
+    @update:visible="emit('update:visible', $event)"
+    :header="title"
+    :modal="true"
+    :closable="true"
+    :style="{ width: '380px' }"
+  >
+    <div class="space-y-4 pt-2">
+      <!-- Name -->
+      <div>
+        <label class="block text-sm text-gray-400 mb-1">Group Name *</label>
+        <InputText v-model="form.name" placeholder="Production Servers" class="w-full" autofocus />
+      </div>
+
+      <!-- Parent -->
+      <div>
+        <label class="block text-sm text-gray-400 mb-1">Parent Group</label>
+        <Select v-model="form.parentId" :options="parentOptions" optionLabel="label" optionValue="value" class="w-full" />
+      </div>
+
+      <!-- Error -->
+      <p v-if="error" class="text-red-400 text-sm">{{ error }}</p>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <Button label="Cancel" severity="secondary" @click="emit('update:visible', false)" />
+        <Button :label="saving ? 'Saving...' : 'Save'" :disabled="saving || !form.name" @click="save" />
+      </div>
+    </template>
+  </Dialog>
+</template>
diff --git a/frontend/components/connections/HostCard.vue b/frontend/components/connections/HostCard.vue
new file mode 100644
index 0000000..13fdb35
--- /dev/null
+++ b/frontend/components/connections/HostCard.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+interface Host {
+  id: number
+  name: string
+  hostname: string
+  port: number
+  protocol: 'ssh' | 'rdp'
+  tags: string[]
+  notes: string | null
+  color: string | null
+  lastConnectedAt: string | null
+  group: { id: number; name: string } | null
+}
+
+const props = defineProps<{
+  host: Host
+}>()
+
+const emit = defineEmits<{
+  (e: 'edit'): void
+  (e: 'delete'): void
+  (e: 'connect'): void
+}>()
+
+function formatLastConnected(ts: string | null): string {
+  if (!ts) return 'Never'
+  const d = new Date(ts)
+  const now = new Date()
+  const diffMs = now.getTime() - d.getTime()
+  const diffDays = Math.floor(diffMs / 86400000)
+  if (diffDays === 0) return 'Today'
+  if (diffDays === 1) return 'Yesterday'
+  if (diffDays < 30) return `${diffDays}d ago`
+  return d.toLocaleDateString()
+}
+</script>
+
+<template>
+  <div
+    class="relative bg-gray-900 border border-gray-800 rounded-lg p-4 hover:border-wraith-700 transition-colors group cursor-pointer"
+    @click="emit('connect')"
+  >
+    <!-- Color indicator strip -->
+    <div
+      v-if="host.color"
+      class="absolute top-0 left-0 w-1 h-full rounded-l-lg"
+      :style="{ backgroundColor: host.color }"
+    />
+
+    <!-- Header row -->
+    <div class="flex items-start justify-between gap-2 pl-2">
+      <div class="min-w-0 flex-1">
+        <h3 class="font-semibold text-white truncate">{{ host.name }}</h3>
+        <p class="text-sm text-gray-500 truncate">{{ host.hostname }}:{{ host.port }}</p>
+      </div>
+
+      <!-- Protocol badge -->
+      <span
+        class="text-xs font-medium px-2 py-0.5 rounded shrink-0"
+        :class="host.protocol === 'rdp'
+          ? 'bg-purple-900/50 text-purple-300 border border-purple-800'
+          : 'bg-wraith-900/50 text-wraith-300 border border-wraith-800'"
+      >{{ host.protocol.toUpperCase() }}</span>
+    </div>
+
+    <!-- Group + last connected -->
+    <div class="mt-2 pl-2 flex items-center justify-between text-xs text-gray-600">
+      <span v-if="host.group" class="truncate">{{ host.group.name }}</span>
+      <span v-else class="italic">Ungrouped</span>
+      <span>{{ formatLastConnected(host.lastConnectedAt) }}</span>
+    </div>
+
+    <!-- Tags -->
+    <div v-if="host.tags?.length" class="mt-2 pl-2 flex flex-wrap gap-1">
+      <span
+        v-for="tag in host.tags"
+        :key="tag"
+        class="text-xs bg-gray-800 text-gray-400 px-1.5 py-0.5 rounded"
+      >{{ tag }}</span>
+    </div>
+
+    <!-- Action buttons (show on hover) -->
+    <div
+      class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity flex gap-1"
+      @click.stop
+    >
+      <button
+        @click="emit('edit')"
+        class="text-xs bg-gray-800 hover:bg-gray-700 text-gray-400 hover:text-white px-2 py-1 rounded"
+      >Edit</button>
+      <button
+        @click="emit('delete')"
+        class="text-xs bg-gray-800 hover:bg-red-900 text-gray-400 hover:text-red-300 px-2 py-1 rounded"
+      >Delete</button>
+    </div>
+  </div>
+</template>
diff --git a/frontend/components/connections/HostEditDialog.vue b/frontend/components/connections/HostEditDialog.vue
new file mode 100644
index 0000000..f90c49b
--- /dev/null
+++ b/frontend/components/connections/HostEditDialog.vue
@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import { Dialog, InputText, Select, Textarea, InputGroup, InputGroupAddon, ToggleSwitch, Tag, Button } from 'primevue'
+
+const props = defineProps<{
+  visible: boolean
+  host: any | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', val: boolean): void
+  (e: 'saved'): void
+}>()
+
+const connections = useConnectionStore()
+const auth = useAuthStore()
+
+const form = ref({
+  name: '',
+  hostname: '',
+  port: 22,
+  protocol: 'ssh' as 'ssh' | 'rdp',
+  groupId: null as number | null,
+  credentialId: null as number | null,
+  tags: [] as string[],
+  notes: '',
+  color: '',
+})
+
+const tagInput = ref('')
+const saving = ref(false)
+const error = ref('')
+
+const isEdit = computed(() => !!props.host?.id)
+const title = computed(() => isEdit.value ? 'Edit Host' : 'New Host')
+
+const protocolOptions = [
+  { label: 'SSH', value: 'ssh' },
+  { label: 'RDP', value: 'rdp' },
+]
+
+const groupOptions = computed(() => [
+  { label: 'No Group', value: null },
+  ...connections.groups.map((g: any) => ({ label: g.name, value: g.id })),
+])
+
+// Load credentials for dropdown
+const credentials = ref<any[]>([])
+const credentialOptions = computed(() => [
+  { label: 'No Credential', value: null },
+  ...credentials.value.map((c: any) => ({ label: c.name, value: c.id })),
+])
+
+async function loadCredentials() {
+  try {
+    credentials.value = await $fetch('/api/credentials', {
+      headers: { Authorization: `Bearer ${auth.token}` },
+    })
+  } catch {
+    credentials.value = []
+  }
+}
+
+watch(() => props.visible, (v) => {
+  if (v) {
+    loadCredentials()
+    if (props.host?.id) {
+      // Edit mode — populate form
+      form.value = {
+        name: props.host.name || '',
+        hostname: props.host.hostname || '',
+        port: props.host.port || 22,
+        protocol: props.host.protocol || 'ssh',
+        groupId: props.host.groupId ?? null,
+        credentialId: props.host.credentialId ?? null,
+        tags: [...(props.host.tags || [])],
+        notes: props.host.notes || '',
+        color: props.host.color || '',
+      }
+    } else {
+      // New host — reset with optional groupId pre-fill
+      form.value = {
+        name: '',
+        hostname: '',
+        port: props.host?.groupId ? 22 : 22,
+        protocol: 'ssh',
+        groupId: props.host?.groupId ?? null,
+        credentialId: null,
+        tags: [],
+        notes: '',
+        color: '',
+      }
+    }
+    error.value = ''
+  }
+})
+
+// Auto-set default port when protocol changes
+watch(() => form.value.protocol, (proto) => {
+  if (proto === 'rdp' && form.value.port === 22) form.value.port = 3389
+  if (proto === 'ssh' && form.value.port === 3389) form.value.port = 22
+})
+
+function addTag() {
+  const t = tagInput.value.trim()
+  if (t && !form.value.tags.includes(t)) {
+    form.value.tags.push(t)
+  }
+  tagInput.value = ''
+}
+
+function removeTag(tag: string) {
+  form.value.tags = form.value.tags.filter((t) => t !== tag)
+}
+
+async function save() {
+  error.value = ''
+  saving.value = true
+  try {
+    const payload = {
+      ...form.value,
+      port: Number(form.value.port),
+      color: form.value.color || undefined,
+      notes: form.value.notes || undefined,
+    }
+
+    if (isEdit.value) {
+      await connections.updateHost(props.host.id, payload)
+    } else {
+      await connections.createHost(payload)
+    }
+
+    emit('saved')
+    emit('update:visible', false)
+  } catch (e: any) {
+    error.value = e.data?.message || 'Failed to save host'
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <Dialog
+    :visible="visible"
+    @update:visible="emit('update:visible', $event)"
+    :header="title"
+    :modal="true"
+    :closable="true"
+    :style="{ width: '480px' }"
+    class="bg-gray-900"
+  >
+    <div class="space-y-4 pt-2">
+      <!-- Name -->
+      <div>
+        <label class="block text-sm text-gray-400 mb-1">Name *</label>
+        <InputText v-model="form.name" placeholder="My Server" class="w-full" />
+      </div>
+
+      <!-- Hostname + Port -->
+      <div class="flex gap-3">
+        <div class="flex-1">
+          <label class="block text-sm text-gray-400 mb-1">Hostname / IP *</label>
+          <InputText v-model="form.hostname" placeholder="192.168.1.1" class="w-full" />
+        </div>
+        <div class="w-24">
+          <label class="block text-sm text-gray-400 mb-1">Port</label>
+          <InputText v-model.number="form.port" type="number" class="w-full" />
+        </div>
+      </div>
+
+      <!-- Protocol -->
+      <div>
+        <label class="block text-sm text-gray-400 mb-1">Protocol</label>
+        <Select v-model="form.protocol" :options="protocolOptions" optionLabel="label" optionValue="value" class="w-full" />
+      </div>
+
+      <!-- Group -->
+      <div>
+        <label class="block text-sm text-gray-400 mb-1">Group</label>
+        <Select v-model="form.groupId" :options="groupOptions" optionLabel="label" optionValue="value" class="w-full" />
+      </div>
+
+      <!-- Credential -->
+      <div>
+        <label class="block text-sm text-gray-400 mb-1">Credential</label>
+        <Select v-model="form.credentialId" :options="credentialOptions" optionLabel="label" optionValue="value" class="w-full" />
+      </div>
+
+      <!-- Color -->
+      <div>
+        <label class="block text-sm text-gray-400 mb-1">Color (optional)</label>
+        <div class="flex items-center gap-2">
+          <input v-model="form.color" type="color" class="h-8 w-12 rounded cursor-pointer bg-gray-800 border-0" />
+          <span class="text-xs text-gray-500">{{ form.color || 'None' }}</span>
+          <button v-if="form.color" @click="form.color = ''" class="text-xs text-gray-600 hover:text-red-400">Clear</button>
+        </div>
+      </div>
+
+      <!-- Tags -->
+      <div>
+        <label class="block text-sm text-gray-400 mb-1">Tags</label>
+        <div class="flex gap-2 mb-2">
+          <InputText
+            v-model="tagInput"
+            placeholder="Add tag..."
+            class="flex-1 text-sm"
+            @keydown.enter.prevent="addTag"
+          />
+          <button @click="addTag" class="px-3 py-1.5 bg-gray-700 hover:bg-gray-600 text-sm rounded text-gray-300">Add</button>
+        </div>
+        <div class="flex flex-wrap gap-1">
+          <span
+            v-for="tag in form.tags"
+            :key="tag"
+            class="inline-flex items-center gap-1 bg-gray-800 text-gray-300 text-xs px-2 py-1 rounded"
+          >
+            {{ tag }}
+            <button @click="removeTag(tag)" class="text-gray-500 hover:text-red-400">&times;</button>
+          </span>
+        </div>
+      </div>
+
+      <!-- Notes -->
+      <div>
+        <label class="block text-sm text-gray-400 mb-1">Notes</label>
+        <Textarea v-model="form.notes" rows="3" class="w-full text-sm" placeholder="Optional notes..." />
+      </div>
+
+      <!-- Error -->
+      <p v-if="error" class="text-red-400 text-sm">{{ error }}</p>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <Button label="Cancel" severity="secondary" @click="emit('update:visible', false)" />
+        <Button :label="saving ? 'Saving...' : 'Save'" :disabled="saving || !form.name || !form.hostname" @click="save" />
+      </div>
+    </template>
+  </Dialog>
+</template>
diff --git a/frontend/components/connections/HostTree.vue b/frontend/components/connections/HostTree.vue
new file mode 100644
index 0000000..bd1c43b
--- /dev/null
+++ b/frontend/components/connections/HostTree.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+interface Host {
+  id: number
+  name: string
+  hostname: string
+  port: number
+  protocol: 'ssh' | 'rdp'
+  color: string | null
+}
+
+interface HostGroup {
+  id: number
+  name: string
+  parentId: number | null
+  children: HostGroup[]
+  hosts: Host[]
+}
+
+const props = defineProps<{
+  groups: HostGroup[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'select-host', host: Host): void
+  (e: 'new-host', groupId?: number): void
+}>()
+
+const expanded = ref<Set<number>>(new Set())
+
+function toggleGroup(id: number) {
+  if (expanded.value.has(id)) {
+    expanded.value.delete(id)
+  } else {
+    expanded.value.add(id)
+  }
+}
+
+function isExpanded(id: number) {
+  return expanded.value.has(id)
+}
+</script>
+
+<template>
+  <div class="flex-1 overflow-y-auto text-sm">
+    <!-- Groups -->
+    <template v-for="group in groups" :key="group.id">
+      <div>
+        <!-- Group header -->
+        <div
+          class="flex items-center gap-1 px-3 py-1.5 cursor-pointer hover:bg-gray-800 text-gray-400 hover:text-gray-200 select-none"
+          @click="toggleGroup(group.id)"
+        >
+          <span class="text-xs w-3">{{ isExpanded(group.id) ? '▾' : '▸' }}</span>
+          <span class="font-medium truncate flex-1">{{ group.name }}</span>
+          <button
+            @click.stop="emit('new-host', group.id)"
+            class="text-xs text-gray-600 hover:text-wraith-400 px-1"
+            title="Add host to group"
+          >+</button>
+        </div>
+
+        <!-- Group children (hosts + sub-groups) -->
+        <div v-if="isExpanded(group.id)" class="pl-3">
+          <!-- Sub-groups recursively -->
+          <HostTree
+            v-if="group.children?.length"
+            :groups="group.children"
+            @select-host="(h) => emit('select-host', h)"
+            @new-host="(gid) => emit('new-host', gid)"
+          />
+
+          <!-- Hosts in this group -->
+          <div
+            v-for="host in group.hosts"
+            :key="host.id"
+            class="flex items-center gap-2 px-3 py-1 cursor-pointer hover:bg-gray-800 text-gray-300 hover:text-white"
+            @click="emit('select-host', host)"
+          >
+            <span
+              class="w-2 h-2 rounded-full shrink-0"
+              :style="host.color ? { backgroundColor: host.color } : {}"
+              :class="!host.color ? 'bg-gray-600' : ''"
+            />
+            <span class="truncate flex-1">{{ host.name }}</span>
+            <span
+              class="text-xs px-1 rounded"
+              :class="host.protocol === 'rdp' ? 'text-purple-400 bg-purple-900/30' : 'text-wraith-400 bg-wraith-900/30'"
+            >{{ host.protocol.toUpperCase() }}</span>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Ungrouped hosts (shown at root level when no groups) -->
+    <div v-if="!groups.length" class="px-3 py-2 text-gray-600 text-xs">No groups yet</div>
+  </div>
+</template>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
new file mode 100644
index 0000000..191e82e
--- /dev/null
+++ b/frontend/layouts/default.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const auth = useAuthStore()
+
+// Redirect to login if not authenticated
+if (!auth.isAuthenticated) {
+  navigateTo('/login')
+}
+</script>
+
+<template>
+  <div class="h-screen flex flex-col bg-gray-950 text-gray-100">
+    <!-- Top bar -->
+    <header class="h-12 flex items-center justify-between px-4 bg-gray-900 border-b border-gray-800 shrink-0">
+      <div class="flex items-center gap-3">
+        <h1 class="text-lg font-bold tracking-wider text-wraith-400">WRAITH</h1>
+      </div>
+      <div class="flex items-center gap-3">
+        <NuxtLink to="/vault" class="text-sm text-gray-400 hover:text-white">Vault</NuxtLink>
+        <NuxtLink to="/settings" class="text-sm text-gray-400 hover:text-white">Settings</NuxtLink>
+        <button @click="auth.logout()" class="text-sm text-gray-500 hover:text-red-400">Logout</button>
+      </div>
+    </header>
+    <!-- Main content -->
+    <div class="flex-1 flex overflow-hidden">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
new file mode 100644
index 0000000..a881258
--- /dev/null
+++ b/frontend/pages/index.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const connections = useConnectionStore()
+const showHostDialog = ref(false)
+const editingHost = ref<any>(null)
+const showGroupDialog = ref(false)
+
+onMounted(async () => {
+  await Promise.all([connections.fetchHosts(), connections.fetchTree()])
+})
+
+function openNewHost(groupId?: number) {
+  editingHost.value = groupId ? { groupId } : null
+  showHostDialog.value = true
+}
+
+function openEditHost(host: any) {
+  editingHost.value = host
+  showHostDialog.value = true
+}
+</script>
+
+<template>
+  <div class="flex w-full">
+    <!-- Sidebar: Group tree -->
+    <aside class="w-64 bg-gray-900 border-r border-gray-800 flex flex-col overflow-y-auto shrink-0">
+      <div class="p-3 flex items-center justify-between">
+        <span class="text-sm font-medium text-gray-400">Connections</span>
+        <div class="flex gap-1">
+          <button @click="showGroupDialog = true" class="text-xs text-gray-500 hover:text-wraith-400" title="New Group">+ Group</button>
+          <button @click="openNewHost()" class="text-xs text-gray-500 hover:text-wraith-400" title="New Host">+ Host</button>
+        </div>
+      </div>
+      <HostTree :groups="connections.groups" @select-host="openEditHost" @new-host="openNewHost" />
+    </aside>
+
+    <!-- Main: host list or active sessions (sessions added in Phase 2) -->
+    <main class="flex-1 p-4 overflow-y-auto">
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+        <HostCard
+          v-for="host in connections.hosts"
+          :key="host.id"
+          :host="host"
+          @edit="openEditHost(host)"
+          @delete="connections.deleteHost(host.id)"
+        />
+      </div>
+      <p v-if="!connections.hosts.length && !connections.loading" class="text-gray-600 text-center mt-12">
+        No hosts yet. Click "+ Host" to add your first connection.
+      </p>
+    </main>
+
+    <!-- Dialogs -->
+    <HostEditDialog v-model:visible="showHostDialog" :host="editingHost" @saved="connections.fetchHosts()" />
+    <GroupEditDialog v-model:visible="showGroupDialog" @saved="connections.fetchTree()" />
+  </div>
+</template>
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
new file mode 100644
index 0000000..f5a0c1e
--- /dev/null
+++ b/frontend/pages/login.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'auth' })
+
+const auth = useAuthStore()
+const email = ref('admin@wraith.local')
+const password = ref('')
+const error = ref('')
+const loading = ref(false)
+
+async function handleLogin() {
+  error.value = ''
+  loading.value = true
+  try {
+    await auth.login(email.value, password.value)
+    navigateTo('/')
+  } catch (e: any) {
+    error.value = e.data?.message || 'Login failed'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm">
+    <div class="text-center mb-8">
+      <h1 class="text-3xl font-bold text-white tracking-wide">WRAITH</h1>
+      <p class="text-gray-500 mt-1 text-sm">Remote Access Terminal</p>
+    </div>
+    <form @submit.prevent="handleLogin" class="space-y-4 bg-gray-900 p-6 rounded-lg border border-gray-800">
+      <div>
+        <label class="block text-sm text-gray-400 mb-1">Email</label>
+        <input v-model="email" type="email" required autofocus
+          class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white focus:border-wraith-500 focus:outline-none" />
+      </div>
+      <div>
+        <label class="block text-sm text-gray-400 mb-1">Password</label>
+        <input v-model="password" type="password" required
+          class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white focus:border-wraith-500 focus:outline-none" />
+      </div>
+      <p v-if="error" class="text-red-400 text-sm">{{ error }}</p>
+      <button type="submit" :disabled="loading"
+        class="w-full py-2 bg-wraith-600 hover:bg-wraith-700 text-white rounded font-medium disabled:opacity-50">
+        {{ loading ? 'Signing in...' : 'Sign In' }}
+      </button>
+    </form>
+  </div>
+</template>
diff --git a/frontend/stores/auth.store.ts b/frontend/stores/auth.store.ts
new file mode 100644
index 0000000..4ad0940
--- /dev/null
+++ b/frontend/stores/auth.store.ts
@@ -0,0 +1,44 @@
+import { defineStore } from 'pinia'
+
+interface User {
+  id: number
+  email: string
+  displayName: string | null
+}
+
+export const useAuthStore = defineStore('auth', {
+  state: () => ({
+    token: localStorage.getItem('wraith_token') || '',
+    user: null as User | null,
+  }),
+  getters: {
+    isAuthenticated: (state) => !!state.token,
+  },
+  actions: {
+    async login(email: string, password: string) {
+      const res = await $fetch<{ access_token: string; user: User }>('/api/auth/login', {
+        method: 'POST',
+        body: { email, password },
+      })
+      this.token = res.access_token
+      this.user = res.user
+      localStorage.setItem('wraith_token', res.access_token)
+    },
+    logout() {
+      this.token = ''
+      this.user = null
+      localStorage.removeItem('wraith_token')
+      navigateTo('/login')
+    },
+    async fetchProfile() {
+      if (!this.token) return
+      try {
+        this.user = await $fetch('/api/auth/profile', {
+          headers: { Authorization: `Bearer ${this.token}` },
+        })
+      } catch {
+        this.logout()
+      }
+    },
+  },
+})
diff --git a/frontend/stores/connection.store.ts b/frontend/stores/connection.store.ts
new file mode 100644
index 0000000..4e78247
--- /dev/null
+++ b/frontend/stores/connection.store.ts
@@ -0,0 +1,98 @@
+import { defineStore } from 'pinia'
+import { useAuthStore } from './auth.store'
+
+interface Host {
+  id: number
+  name: string
+  hostname: string
+  port: number
+  protocol: 'ssh' | 'rdp'
+  groupId: number | null
+  credentialId: number | null
+  tags: string[]
+  notes: string | null
+  color: string | null
+  lastConnectedAt: string | null
+  group: { id: number; name: string } | null
+}
+
+interface HostGroup {
+  id: number
+  name: string
+  parentId: number | null
+  children: HostGroup[]
+  hosts: Host[]
+}
+
+export const useConnectionStore = defineStore('connections', {
+  state: () => ({
+    hosts: [] as Host[],
+    groups: [] as HostGroup[],
+    search: '',
+    loading: false,
+  }),
+  actions: {
+    headers() {
+      const auth = useAuthStore()
+      return { Authorization: `Bearer ${auth.token}` }
+    },
+    async fetchHosts() {
+      this.loading = true
+      try {
+        this.hosts = await $fetch('/api/hosts', { headers: this.headers() })
+      } finally {
+        this.loading = false
+      }
+    },
+    async fetchTree() {
+      this.groups = await $fetch('/api/groups/tree', { headers: this.headers() })
+    },
+    async createHost(data: Partial<Host>) {
+      const host = await $fetch<Host>('/api/hosts', {
+        method: 'POST',
+        body: data,
+        headers: this.headers(),
+      })
+      await this.fetchHosts()
+      return host
+    },
+    async updateHost(id: number, data: Partial<Host>) {
+      await $fetch(`/api/hosts/${id}`, {
+        method: 'PUT',
+        body: data,
+        headers: this.headers(),
+      })
+      await this.fetchHosts()
+    },
+    async deleteHost(id: number) {
+      await $fetch(`/api/hosts/${id}`, {
+        method: 'DELETE',
+        headers: this.headers(),
+      })
+      await this.fetchHosts()
+    },
+    async createGroup(data: { name: string; parentId?: number }) {
+      await $fetch('/api/groups', {
+        method: 'POST',
+        body: data,
+        headers: this.headers(),
+      })
+      await this.fetchTree()
+    },
+    async updateGroup(id: number, data: { name?: string; parentId?: number }) {
+      await $fetch(`/api/groups/${id}`, {
+        method: 'PUT',
+        body: data,
+        headers: this.headers(),
+      })
+      await this.fetchTree()
+    },
+    async deleteGroup(id: number) {
+      await $fetch(`/api/groups/${id}`, {
+        method: 'DELETE',
+        headers: this.headers(),
+      })
+      await this.fetchTree()
+    },
+  },
+})