jamie/nucleus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: initialize project workspace and install frontend dependencies

Browse Source
This commit is contained in:
Jamie
2026-07-17 01:11:49 +01:00
commit bfa3a5c54a
29 changed files with 2845 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.vue
+22
View File
@@ -0,0 +1,22 @@
<template>
<div class="min-h-screen bg-bg text-body flex flex-col font-sans">
<header class="bg-surface border-b border-border-subtle shadow-sm relative z-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 rounded-full bg-accent flex items-center justify-center font-bold text-bg shadow-lg border border-accent/80">N</div>
<h1 class="text-xl font-bold text-heading">Nucleus</h1>
</div>
<nav class="flex space-x-4">
<router-link to="/" class="px-3 py-2 rounded-md text-sm font-medium transition-colors hover:bg-border-subtle hover:text-heading" active-class="bg-bg text-accent shadow-inner">Targets</router-link>
<router-link to="/scans" class="px-3 py-2 rounded-md text-sm font-medium transition-colors hover:bg-border-subtle hover:text-heading" active-class="bg-bg text-accent shadow-inner">Scans History</router-link>
</nav>
</div>
</header>
<main class="flex-1 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative">
<!-- Glow effect -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-3xl h-64 bg-accent/10 blur-[120px] pointer-events-none"></div>
<router-view class="relative z-10"></router-view>
</main>
</div>
</template>
frontend/src/assets/hero.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

frontend/src/assets/vite.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

frontend/src/assets/vue.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 496 B

frontend/src/components/FindingsInspector.vue
+90
View File
@@ -0,0 +1,90 @@
<template>
<div class="space-y-6">
<div class="flex items-center space-x-4 mb-6">
<router-link to="/scans" class="text-body hover:text-heading transition-colors flex items-center">
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
Back
</router-link>
<h2 class="text-2xl font-bold text-heading">Scan Findings Inspector</h2>
</div>
<div class="bg-surface rounded-xl overflow-hidden shadow-lg border border-border-subtle">
<div class="px-6 py-4 border-b border-border-subtle flex justify-between items-center">
<h3 class="text-lg font-medium text-heading">All Findings ({{ findings.length }})</h3>
<button @click="loadFindings" class="text-body hover:text-heading transition-colors">Refresh</button>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left text-sm">
<thead class="bg-bg/50 text-body">
<tr>
<th class="px-6 py-3 font-medium">Severity</th>
<th class="px-6 py-3 font-medium">Name & Template</th>
<th class="px-6 py-3 font-medium">Host</th>
<th class="px-6 py-3 font-medium">Matched At</th>
</tr>
</thead>
<tbody class="divide-y divide-border-subtle">
<tr v-for="finding in findings" :key="finding.id" class="hover:bg-border-subtle/30 transition-colors">
<td class="px-6 py-4">
<span :class="severityClass(finding.severity)" class="px-2.5 py-1 rounded-md text-xs font-bold uppercase tracking-wider border">
{{ finding.severity }}
</span>
</td>
<td class="px-6 py-4">
<div class="text-heading font-medium">{{ finding.name }}</div>
<div class="text-body font-mono text-xs mt-1">{{ finding.template_id }}</div>
<div v-if="finding.description" class="text-body text-xs mt-2 max-w-md truncate" :title="finding.description">
{{ finding.description }}
</div>
</td>
<td class="px-6 py-4 text-body font-mono text-xs">{{ finding.host }}</td>
<td class="px-6 py-4 text-body text-xs break-all max-w-xs">{{ finding.matched_at }}</td>
</tr>
<tr v-if="findings.length === 0">
<td colspan="4" class="px-6 py-12 text-center">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-bg mb-4 border border-border-subtle">
<svg class="w-8 h-8 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<h3 class="text-lg font-medium text-heading mb-1">No Findings</h3>
<p class="text-body">This scan completed cleanly without any detected vulnerabilities.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps({
id: { type: String, required: true }
})
const findings = ref([])
const loadFindings = async () => {
try {
const res = await fetch(`/api/scans/${props.id}/findings`)
findings.value = await res.json() || []
} catch (e) {
console.error(e)
}
}
const severityClass = (sev) => {
const map = {
critical: 'bg-red-500/20 text-red-400 border-red-500/50',
high: 'bg-orange-500/20 text-orange-400 border-orange-500/50',
medium: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/50',
low: 'bg-blue-500/20 text-blue-400 border-blue-500/50',
info: 'bg-border-subtle/50 text-body border-border-subtle'
}
return map[sev] || map.info
}
onMounted(loadFindings)
</script>
frontend/src/components/HelloWorld.vue
+95
View File
@@ -0,0 +1,95 @@
<script setup>
import { ref } from 'vue'
import viteLogo from '../assets/vite.svg'
import heroImg from '../assets/hero.png'
import vueLogo from '../assets/vue.svg'
const count = ref(0)
</script>
<template>
<section id="center">
<div class="hero">
<img :src="heroImg" class="base" width="170" height="179" alt="" />
<img :src="vueLogo" class="framework" alt="Vue logo" />
<img :src="viteLogo" class="vite" alt="Vite logo" />
</div>
<div>
<h1>Get started</h1>
<p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
</div>
<button type="button" class="counter" @click="count++">
Count is {{ count }}
</button>
</section>
<div class="ticks"></div>
<section id="next-steps">
<div id="docs">
<svg class="icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#documentation-icon"></use>
</svg>
<h2>Documentation</h2>
<p>Your questions, answered</p>
<ul>
<li>
<a href="https://vite.dev/" target="_blank">
<img class="logo" :src="viteLogo" alt="" />
Explore Vite
</a>
</li>
<li>
<a href="https://vuejs.org/" target="_blank">
<img class="button-icon" :src="vueLogo" alt="" />
Learn more
</a>
</li>
</ul>
</div>
<div id="social">
<svg class="icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#social-icon"></use>
</svg>
<h2>Connect with us</h2>
<p>Join the Vite community</p>
<ul>
<li>
<a href="https://github.com/vitejs/vite" target="_blank">
<svg class="button-icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#github-icon"></use>
</svg>
GitHub
</a>
</li>
<li>
<a href="https://chat.vite.dev/" target="_blank">
<svg class="button-icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#discord-icon"></use>
</svg>
Discord
</a>
</li>
<li>
<a href="https://x.com/vite_js" target="_blank">
<svg class="button-icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#x-icon"></use>
</svg>
X.com
</a>
</li>
<li>
<a href="https://bsky.app/profile/vite.dev" target="_blank">
<svg class="button-icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#bluesky-icon"></use>
</svg>
Bluesky
</a>
</li>
</ul>
</div>
</section>
<div class="ticks"></div>
<section id="spacer"></section>
</template>
frontend/src/components/ScansHistory.vue
+109
View File
@@ -0,0 +1,109 @@
<template>
<div class="bg-surface rounded-xl overflow-hidden shadow-lg border border-border-subtle">
<div class="px-6 py-4 border-b border-border-subtle flex justify-between items-center">
<h2 class="text-xl font-semibold text-heading">Scans History</h2>
<button @click="loadScans" class="text-body hover:text-heading transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
</button>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left text-sm">
<thead class="bg-bg/50 text-body">
<tr>
<th class="px-6 py-3 font-medium">Target</th>
<th class="px-6 py-3 font-medium">Status</th>
<th class="px-6 py-3 font-medium">Started At</th>
<th class="px-6 py-3 font-medium">Duration</th>
<th class="px-6 py-3 font-medium">Findings</th>
<th class="px-6 py-3 font-medium text-right">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-border-subtle">
<tr v-for="scan in scans" :key="scan.id" class="hover:bg-border-subtle/30 transition-colors">
<td class="px-6 py-4 text-heading font-medium">{{ scan.target_name }}</td>
<td class="px-6 py-4">
<span v-if="scan.status === 'running'" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900/50 text-blue-400 border border-blue-800">
<svg class="animate-spin -ml-0.5 mr-1.5 h-3 w-3 text-blue-400" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Running
</span>
<span v-else-if="scan.status === 'completed'" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900/50 text-green-400 border border-green-800">
<svg class="mr-1.5 h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Completed
</span>
<span v-else class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-900/50 text-red-400 border border-red-800">
Failed
</span>
</td>
<td class="px-6 py-4 text-body">
{{ new Date(scan.started_at).toLocaleString() }}
</td>
<td class="px-6 py-4 text-body">
{{ getDuration(scan.started_at, scan.completed_at) }}
</td>
<td class="px-6 py-4">
<div class="flex space-x-2">
<span v-if="getSeverityCount(scan, 'critical') > 0" class="px-2 py-0.5 rounded text-xs font-bold bg-red-500/20 text-red-400 border border-red-500/50" title="Critical">{{ getSeverityCount(scan, 'critical') }}</span>
<span v-if="getSeverityCount(scan, 'high') > 0" class="px-2 py-0.5 rounded text-xs font-bold bg-orange-500/20 text-orange-400 border border-orange-500/50" title="High">{{ getSeverityCount(scan, 'high') }}</span>
<span v-if="getSeverityCount(scan, 'medium') > 0" class="px-2 py-0.5 rounded text-xs font-bold bg-yellow-500/20 text-yellow-400 border border-yellow-500/50" title="Medium">{{ getSeverityCount(scan, 'medium') }}</span>
<span v-if="getSeverityCount(scan, 'low') > 0" class="px-2 py-0.5 rounded text-xs font-bold bg-blue-500/20 text-blue-400 border border-blue-500/50" title="Low">{{ getSeverityCount(scan, 'low') }}</span>
<span v-if="getSeverityCount(scan, 'info') > 0" class="px-2 py-0.5 rounded text-xs font-bold bg-border-subtle/50 text-body border border-border-subtle" title="Info">{{ getSeverityCount(scan, 'info') }}</span>
<span v-if="totalFindings(scan) === 0" class="text-body text-xs">None</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<router-link :to="`/scans/${scan.id}`" class="text-accent hover:text-accent/80 font-medium transition-colors">View Details</router-link>
</td>
</tr>
<tr v-if="scans.length === 0">
<td colspan="6" class="px-6 py-8 text-center text-body">No scans recorded yet.</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const scans = ref([])
let interval = null
const loadScans = async () => {
try {
const res = await fetch('/api/scans')
scans.value = await res.json() || []
} catch (e) {
console.error(e)
}
}
const getDuration = (start, end) => {
if (!end) return '...'
const ms = new Date(end) - new Date(start)
const sec = Math.floor(ms / 1000)
if (sec < 60) return `${sec}s`
return `${Math.floor(sec / 60)}m ${sec % 60}s`
}
const getSeverityCount = (scan, sev) => {
return scan.finding_counts?.[sev] || 0
}
const totalFindings = (scan) => {
if (!scan.finding_counts) return 0
return Object.values(scan.finding_counts).reduce((a, b) => a + b, 0)
}
onMounted(() => {
loadScans()
interval = setInterval(loadScans, 5000)
})
onUnmounted(() => {
if (interval) clearInterval(interval)
})
</script>
frontend/src/components/TargetManager.vue
+112
View File
@@ -0,0 +1,112 @@
<template>
<div class="space-y-6">
<div class="bg-surface rounded-xl p-6 shadow-lg border border-border-subtle backdrop-blur-sm">
<h2 class="text-xl font-semibold mb-4 text-heading">Add New Target</h2>
<form @submit.prevent="addTarget" class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
<div>
<label class="block text-sm font-medium text-body mb-1">Name</label>
<input v-model="form.name" type="text" required class="w-full bg-bg border border-border-subtle rounded-lg px-4 py-2 text-heading focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-all" placeholder="Prod App">
</div>
<div>
<label class="block text-sm font-medium text-body mb-1">Address / Subnet</label>
<input v-model="form.address" type="text" required class="w-full bg-bg border border-border-subtle rounded-lg px-4 py-2 text-heading focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-all" placeholder="10.0.0.1/24 or example.com">
</div>
<div>
<label class="block text-sm font-medium text-body mb-1">Schedule</label>
<select v-model="form.schedule" class="w-full bg-bg border border-border-subtle rounded-lg px-4 py-2 text-heading focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-all">
<option value="manual">Manual Only</option>
<option value="@midnight">Daily at Midnight</option>
<option value="@hourly">Hourly</option>
<option value="0 0 * * 0">Weekly on Sunday</option>
</select>
</div>
<div>
<button type="submit" class="w-full bg-accent hover:bg-accent/80 text-bg font-bold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-all transform hover:-translate-y-0.5">
Add Target
</button>
</div>
</form>
</div>
<div class="bg-surface rounded-xl overflow-hidden shadow-lg border border-border-subtle">
<div class="px-6 py-4 border-b border-border-subtle flex justify-between items-center">
<h2 class="text-xl font-semibold text-heading">Configured Targets</h2>
<button @click="loadTargets" class="text-body hover:text-heading transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
</button>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left text-sm">
<thead class="bg-bg/50 text-body">
<tr>
<th class="px-6 py-3 font-medium">Name</th>
<th class="px-6 py-3 font-medium">Address</th>
<th class="px-6 py-3 font-medium">Schedule</th>
<th class="px-6 py-3 font-medium">Last Scan</th>
<th class="px-6 py-3 font-medium text-right">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-border-subtle">
<tr v-for="target in targets" :key="target.id" class="hover:bg-border-subtle/30 transition-colors">
<td class="px-6 py-4 text-heading font-medium">{{ target.name }}</td>
<td class="px-6 py-4 text-body font-mono text-xs">{{ target.address }}</td>
<td class="px-6 py-4 text-body">
<span class="px-2 py-1 bg-bg rounded text-xs border border-border-subtle">{{ target.schedule }}</span>
</td>
<td class="px-6 py-4 text-body">
{{ target.last_scan_at ? new Date(target.last_scan_at).toLocaleString() : 'Never' }}
</td>
<td class="px-6 py-4 text-right space-x-3">
<button @click="runScan(target.id)" class="text-accent hover:text-accent/80 font-medium transition-colors">Run Now</button>
<button @click="deleteTarget(target.id)" class="text-red-400 hover:text-red-300 font-medium transition-colors">Delete</button>
</td>
</tr>
<tr v-if="targets.length === 0">
<td colspan="5" class="px-6 py-8 text-center text-body">No targets configured. Add one above.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const targets = ref([])
const form = ref({ name: '', address: '', schedule: 'manual' })
const loadTargets = async () => {
try {
const res = await fetch('/api/targets')
targets.value = await res.json() || []
} catch (e) {
console.error(e)
}
}
const addTarget = async () => {
await fetch('/api/targets', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(form.value)
})
form.value = { name: '', address: '', schedule: 'manual' }
loadTargets()
}
const deleteTarget = async (id) => {
if (!confirm('Delete target?')) return
await fetch(`/api/targets/${id}`, { method: 'DELETE' })
loadTargets()
}
const runScan = async (id) => {
await fetch(`/api/targets/${id}/scan`, { method: 'POST' })
alert('Scan triggered successfully. Check Scans History.')
loadTargets()
}
onMounted(loadTargets)
</script>
frontend/src/main.js
+8
View File
@@ -0,0 +1,8 @@
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { router } from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
frontend/src/router.js
+15
View File
@@ -0,0 +1,15 @@
import { createRouter, createWebHistory } from 'vue-router'
import TargetManager from './components/TargetManager.vue'
import ScansHistory from './components/ScansHistory.vue'
import FindingsInspector from './components/FindingsInspector.vue'
const routes = [
{ path: '/', component: TargetManager },
{ path: '/scans', component: ScansHistory },
{ path: '/scans/:id', component: FindingsInspector, props: true }
]
export const router = createRouter({
history: createWebHistory(),
routes
})
frontend/src/style.css
+16
View File
@@ -0,0 +1,16 @@
@import "tailwindcss";
@theme {
--color-bg: #0d1117;
--color-surface: #161b22;
--color-accent: #1ebe8a;
--color-heading: #e6edf3;
--color-body: #8b949e;
--color-border-subtle: #30363d;
}
body {
margin: 0;
background-color: var(--color-bg);
color: var(--color-body);
}