diff --git a/src/client/components/packages/PackageList.vue b/src/client/components/packages/PackageList.vue
index c26edfa..e56648c 100644
--- a/src/client/components/packages/PackageList.vue
+++ b/src/client/components/packages/PackageList.vue
@@ -5,7 +5,9 @@ import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import PackageItem from './PackageItem.vue'
+import SmartFiltersPanel from './SmartFiltersPanel.vue'
import { useSearch, type FilterType } from '@/composables/useSearch'
+import { useSmartFilters } from '@/composables/useSmartFilters'
import type { Package } from '@shared/types'
const props = defineProps<{
@@ -25,16 +27,67 @@ const emit = defineEmits<{
const packagesRef = computed(() => props.packages)
const { query, filter, filtered, counts, setQuery, setFilter } = useSearch(packagesRef)
-const filters: { value: FilterType; label: string; countKey: keyof typeof counts.value }[] = [
+const {
+ availableLicenses,
+ isLoading: isSmartLoading,
+ hasData: hasSmartData,
+ selectedLicenses,
+ popularityFilter,
+ ageFilter,
+ filteredNames,
+ activeFilterCount,
+ loadSmartData,
+ clearFilters,
+} = useSmartFilters(packagesRef)
+
+const baseFilters: { value: FilterType; label: string; countKey: keyof typeof counts.value }[] = [
{ value: 'all', label: 'All', countKey: 'total' },
{ value: 'outdated', label: 'Outdated', countKey: 'outdated' },
{ value: 'dependencies', label: 'Dependencies', countKey: 'dependencies' },
{ value: 'devDependencies', label: 'Dev', countKey: 'devDependencies' },
]
-const displayedPackages = computed(() =>
- props.limit ? filtered.value.slice(0, props.limit) : filtered.value
-)
+const popularityLabels: Record
= {
+ 'very-popular': '>1M / wk',
+ popular: '>100K / wk',
+ niche: '<100K / wk',
+}
+
+const ageLabels: Record = {
+ active: '<6 months',
+ recent: '6–12 months',
+ stable: '1–2 years',
+ stale: '>2 years',
+}
+
+// Tags to show below the controls row for active smart filters
+const activeTags = computed(() => {
+ const tags: { key: string; label: string; onRemove: () => void }[] = []
+ for (const lic of selectedLicenses.value) {
+ tags.push({ key: `lic:${lic}`, label: lic, onRemove: () => {
+ selectedLicenses.value = selectedLicenses.value.filter(l => l !== lic)
+ }})
+ }
+ if (popularityFilter.value !== 'all') {
+ tags.push({ key: 'pop', label: popularityLabels[popularityFilter.value] ?? popularityFilter.value, onRemove: () => {
+ popularityFilter.value = 'all'
+ }})
+ }
+ if (ageFilter.value !== 'all') {
+ tags.push({ key: 'age', label: ageLabels[ageFilter.value] ?? ageFilter.value, onRemove: () => {
+ ageFilter.value = 'all'
+ }})
+ }
+ return tags
+})
+
+const displayedPackages = computed(() => {
+ let result = filtered.value
+ if (filteredNames.value !== null) {
+ result = result.filter(pkg => filteredNames.value!.has(pkg.name))
+ }
+ return props.limit ? result.slice(0, props.limit) : result
+})
const hasMore = computed(() =>
!!props.limit && props.packages.length > props.limit
@@ -42,10 +95,10 @@ const hasMore = computed(() =>
-
-
+
+
-
+
+
+
+
+ Filtered by:
+
+
+
diff --git a/src/client/components/packages/SmartFiltersPanel.vue b/src/client/components/packages/SmartFiltersPanel.vue
new file mode 100644
index 0000000..43bd2d3
--- /dev/null
+++ b/src/client/components/packages/SmartFiltersPanel.vue
@@ -0,0 +1,225 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Fetching package metadata…
+
+
+
+
+
+
+ Load license, popularity, and age data from npm.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Popularity (weekly downloads)
+
+
+
+
+
+
+ Last Published
+
+
+
+
+
+
+
+
+
diff --git a/src/client/components/ui/badge/Badge.vue b/src/client/components/ui/badge/Badge.vue
index 3800e7c..2073cdb 100644
--- a/src/client/components/ui/badge/Badge.vue
+++ b/src/client/components/ui/badge/Badge.vue
@@ -9,6 +9,7 @@ interface Props {
const props = withDefaults(defineProps
(), {
variant: 'default',
+ class: undefined,
})
diff --git a/src/client/components/ui/button/Button.vue b/src/client/components/ui/button/Button.vue
index f2eae50..556df95 100644
--- a/src/client/components/ui/button/Button.vue
+++ b/src/client/components/ui/button/Button.vue
@@ -14,6 +14,7 @@ const props = withDefaults(defineProps(), {
as: 'button',
variant: 'default',
size: 'default',
+ class: undefined,
})
const delegatedProps = computed(() => {
diff --git a/src/client/composables/useDepcheck.ts b/src/client/composables/useDepcheck.ts
new file mode 100644
index 0000000..961d4fe
--- /dev/null
+++ b/src/client/composables/useDepcheck.ts
@@ -0,0 +1,37 @@
+import { ref } from 'vue'
+import { useApi } from './useApi'
+import type { DepcheckResult } from '@shared/types'
+
+export function useDepcheck() {
+ const { get } = useApi()
+
+ const result = ref(null)
+ const isLoading = ref(false)
+ const error = ref(null)
+
+ async function run() {
+ isLoading.value = true
+ error.value = null
+ try {
+ result.value = await get('/depcheck')
+ } catch (err) {
+ error.value = err instanceof Error ? err.message : 'Failed to run analysis'
+ } finally {
+ isLoading.value = false
+ }
+ }
+
+ async function refresh() {
+ isLoading.value = true
+ error.value = null
+ try {
+ result.value = await get('/depcheck/refresh')
+ } catch (err) {
+ error.value = err instanceof Error ? err.message : 'Failed to run analysis'
+ } finally {
+ isLoading.value = false
+ }
+ }
+
+ return { result, isLoading, error, run, refresh }
+}
diff --git a/src/client/composables/useOperations.ts b/src/client/composables/useOperations.ts
index dc1ee2f..ff61c5b 100644
--- a/src/client/composables/useOperations.ts
+++ b/src/client/composables/useOperations.ts
@@ -1,10 +1,12 @@
import { ref, onMounted, onUnmounted } from 'vue'
import { useQueryClient } from '@tanstack/vue-query'
import { useOperationsStore } from '@/stores/operations'
+import { useScriptsStore } from '@/stores/scripts'
import type { OperationEvent } from '@shared/types'
export function useOperations() {
const store = useOperationsStore()
+ const scriptsStore = useScriptsStore()
const queryClient = useQueryClient()
const isConnected = ref(false)
let eventSource: EventSource | null = null
@@ -29,6 +31,7 @@ export function useOperations() {
}
store.handleEvent(data as OperationEvent)
+ scriptsStore.handleEvent(data as OperationEvent)
if (data.type === 'complete' || data.type === 'error') {
queryClient.invalidateQueries({ queryKey: ['operations', 'history'] })
diff --git a/src/client/composables/useScripts.ts b/src/client/composables/useScripts.ts
new file mode 100644
index 0000000..d098653
--- /dev/null
+++ b/src/client/composables/useScripts.ts
@@ -0,0 +1,31 @@
+import { useQuery, useMutation } from '@tanstack/vue-query'
+import { useApi } from './useApi'
+import type { ScriptDefinition } from '@shared/types'
+
+export function useScripts() {
+ const api = useApi()
+
+ const scripts = useQuery({
+ queryKey: ['scripts'],
+ queryFn: () => api.get('/scripts'),
+ staleTime: 60 * 1000,
+ })
+
+ const runScript = useMutation({
+ mutationFn: (name: string) =>
+ api.post<{ operationId: string }, Record>(
+ `/scripts/${encodeURIComponent(name)}/run`,
+ {}
+ ),
+ })
+
+ const stopScript = useMutation({
+ mutationFn: ({ name, operationId }: { name: string; operationId: string }) =>
+ api.post<{ killed: boolean }, { operationId: string }>(
+ `/scripts/${encodeURIComponent(name)}/stop`,
+ { operationId }
+ ),
+ })
+
+ return { scripts, runScript, stopScript }
+}
diff --git a/src/client/composables/useSmartFilters.ts b/src/client/composables/useSmartFilters.ts
new file mode 100644
index 0000000..de56578
--- /dev/null
+++ b/src/client/composables/useSmartFilters.ts
@@ -0,0 +1,119 @@
+import { ref, computed, type Ref } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
+import { useApi } from './useApi'
+import type { SmartPackageData } from '@shared/types'
+
+export type PopularityFilter = 'all' | 'very-popular' | 'popular' | 'niche'
+export type AgeFilter = 'all' | 'active' | 'recent' | 'stable' | 'stale'
+
+export function normalizeLicense(license: string | null): string {
+ if (!license) return 'Unknown'
+ return license.replace(/^\(|\)$/g, '').trim()
+}
+
+function getAgeCategory(lastPublished: string | null): Exclude {
+ if (!lastPublished) return 'stale'
+ const ageDays = (Date.now() - new Date(lastPublished).getTime()) / 86_400_000
+ if (ageDays < 180) return 'active'
+ if (ageDays < 365) return 'recent'
+ if (ageDays < 730) return 'stable'
+ return 'stale'
+}
+
+function getPopularityCategory(weeklyDownloads: number | null): Exclude {
+ if (!weeklyDownloads) return 'niche'
+ if (weeklyDownloads >= 1_000_000) return 'very-popular'
+ if (weeklyDownloads >= 100_000) return 'popular'
+ return 'niche'
+}
+
+export function useSmartFilters(_packages: Ref) {
+ const { get } = useApi()
+
+ const enabled = ref(false)
+
+ const { data: smartData, isLoading, isFetching } = useQuery({
+ queryKey: ['packages', 'smart-data'],
+ queryFn: () => get('/packages/smart-data'),
+ enabled,
+ staleTime: 5 * 60 * 1000,
+ })
+
+ const selectedLicenses = ref([])
+ const popularityFilter = ref('all')
+ const ageFilter = ref('all')
+
+ const smartDataMap = computed(() => {
+ const map = new Map()
+ smartData.value?.forEach(d => map.set(d.name, d))
+ return map
+ })
+
+ const availableLicenses = computed(() => {
+ if (!smartData.value) return []
+ const licenses = new Set()
+ smartData.value.forEach(d => licenses.add(normalizeLicense(d.license)))
+ return [...licenses].sort()
+ })
+
+ // Returns null when no smart filters are active (skip filtering), otherwise a Set of passing names
+ const filteredNames = computed((): Set | null => {
+ if (!smartData.value) return null
+
+ const hasFilters = selectedLicenses.value.length > 0
+ || popularityFilter.value !== 'all'
+ || ageFilter.value !== 'all'
+
+ if (!hasFilters) return null
+
+ return new Set(
+ smartData.value
+ .filter(d => {
+ if (selectedLicenses.value.length > 0) {
+ if (!selectedLicenses.value.includes(normalizeLicense(d.license))) return false
+ }
+ if (popularityFilter.value !== 'all') {
+ if (getPopularityCategory(d.weeklyDownloads) !== popularityFilter.value) return false
+ }
+ if (ageFilter.value !== 'all') {
+ if (getAgeCategory(d.lastPublished) !== ageFilter.value) return false
+ }
+ return true
+ })
+ .map(d => d.name)
+ )
+ })
+
+ const activeFilterCount = computed(() => {
+ let count = 0
+ if (selectedLicenses.value.length > 0) count++
+ if (popularityFilter.value !== 'all') count++
+ if (ageFilter.value !== 'all') count++
+ return count
+ })
+
+ function loadSmartData() {
+ enabled.value = true
+ }
+
+ function clearFilters() {
+ selectedLicenses.value = []
+ popularityFilter.value = 'all'
+ ageFilter.value = 'all'
+ }
+
+ return {
+ smartData,
+ smartDataMap,
+ isLoading: computed(() => isLoading.value || isFetching.value),
+ hasData: computed(() => !!smartData.value),
+ selectedLicenses,
+ popularityFilter,
+ ageFilter,
+ availableLicenses,
+ filteredNames,
+ activeFilterCount,
+ loadSmartData,
+ clearFilters,
+ }
+}
diff --git a/src/client/composables/useTheme.ts b/src/client/composables/useTheme.ts
new file mode 100644
index 0000000..ae41e0c
--- /dev/null
+++ b/src/client/composables/useTheme.ts
@@ -0,0 +1,30 @@
+import { ref } from 'vue'
+
+type Theme = 'system' | 'light' | 'dark'
+
+const STORAGE_KEY = 'packy-theme'
+const theme = ref((localStorage.getItem(STORAGE_KEY) as Theme) ?? 'system')
+const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+
+function apply() {
+ const isDark = theme.value === 'dark' || (theme.value === 'system' && mediaQuery.matches)
+ document.documentElement.classList.toggle('dark', isDark)
+}
+
+mediaQuery.addEventListener('change', apply)
+apply()
+
+export function useTheme() {
+ function setTheme(value: Theme) {
+ theme.value = value
+ localStorage.setItem(STORAGE_KEY, value)
+ apply()
+ }
+
+ function toggleTheme() {
+ const cycle: Theme[] = ['light', 'dark', 'system']
+ setTheme(cycle[(cycle.indexOf(theme.value) + 1) % cycle.length])
+ }
+
+ return { theme, setTheme, toggleTheme }
+}
diff --git a/src/client/router.ts b/src/client/router.ts
index 3779df2..374aa0d 100644
--- a/src/client/router.ts
+++ b/src/client/router.ts
@@ -24,6 +24,11 @@ const router = createRouter({
name: 'security',
component: () => import('./views/SecurityAuditView.vue'),
},
+ {
+ path: '/scripts',
+ name: 'scripts',
+ component: () => import('./views/ScriptsView.vue'),
+ },
{
path: '/activity',
name: 'activity',
diff --git a/src/client/stores/scripts.ts b/src/client/stores/scripts.ts
new file mode 100644
index 0000000..1628ac6
--- /dev/null
+++ b/src/client/stores/scripts.ts
@@ -0,0 +1,134 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { OperationEvent, OperationLogEntry } from '@shared/types'
+
+interface ScriptRun {
+ operationId: string
+ scriptName: string
+ startedAt: Date
+ status: 'running' | 'completed' | 'failed'
+ completedAt?: Date
+ exitCode?: number
+}
+
+const MAX_RUNS_PER_SCRIPT = 5
+
+export const useScriptsStore = defineStore('scripts', () => {
+ // operationId → ScriptRun
+ const runs = ref>(new Map())
+ // operationId → logs
+ const logs = ref>(new Map())
+ // scriptName → operationId (current/latest)
+ const activeRun = ref>(new Map())
+ // ordered list of operationIds per scriptName (most recent last)
+ const runHistory = ref>(new Map())
+
+ const scriptOperationIds = computed(() => new Set(runs.value.keys()))
+
+ function isRunning(scriptName: string): boolean {
+ const opId = activeRun.value.get(scriptName)
+ if (!opId) return false
+ return runs.value.get(opId)?.status === 'running'
+ }
+
+ function getRunsForScript(scriptName: string): ScriptRun[] {
+ const ids = runHistory.value.get(scriptName) ?? []
+ return ids.map((id) => runs.value.get(id)).filter((r): r is ScriptRun => r !== undefined)
+ }
+
+ function getLogsForRun(operationId: string): OperationLogEntry[] {
+ return logs.value.get(operationId) ?? []
+ }
+
+ function handleEvent(event: OperationEvent) {
+ if (event.type === 'start') {
+ if (event.operationType !== 'script') return
+ const scriptName = event.scriptName ?? event.operationId
+
+ const run: ScriptRun = {
+ operationId: event.operationId,
+ scriptName,
+ startedAt: new Date(),
+ status: 'running',
+ }
+ runs.value.set(event.operationId, run)
+ logs.value.set(event.operationId, [])
+ activeRun.value.set(scriptName, event.operationId)
+
+ const history = runHistory.value.get(scriptName) ?? []
+ history.push(event.operationId)
+ if (history.length > MAX_RUNS_PER_SCRIPT) {
+ const removed = history.splice(0, history.length - MAX_RUNS_PER_SCRIPT)
+ for (const id of removed) {
+ runs.value.delete(id)
+ logs.value.delete(id)
+ }
+ }
+ runHistory.value.set(scriptName, history)
+ return
+ }
+
+ if (!scriptOperationIds.value.has(event.operationId)) return
+
+ if (event.type === 'stdout' || event.type === 'stderr') {
+ const runLogs = logs.value.get(event.operationId)
+ if (runLogs) {
+ runLogs.push({
+ operationId: event.operationId,
+ timestamp: new Date(),
+ stream: event.type,
+ data: event.data,
+ })
+ }
+ } else if (event.type === 'complete') {
+ const run = runs.value.get(event.operationId)
+ if (run) {
+ run.status = event.exitCode === 0 ? 'completed' : 'failed'
+ run.completedAt = new Date()
+ run.exitCode = event.exitCode
+ }
+ } else if (event.type === 'error') {
+ const run = runs.value.get(event.operationId)
+ if (run) {
+ run.status = 'failed'
+ run.completedAt = new Date()
+ }
+ const runLogs = logs.value.get(event.operationId)
+ if (runLogs) {
+ runLogs.push({
+ operationId: event.operationId,
+ timestamp: new Date(),
+ stream: 'stderr',
+ data: event.error,
+ })
+ }
+ }
+ }
+
+ function clearRun(operationId: string) {
+ const run = runs.value.get(operationId)
+ if (!run) return
+ logs.value.delete(operationId)
+ runs.value.delete(operationId)
+ const history = runHistory.value.get(run.scriptName)
+ if (history) {
+ const idx = history.indexOf(operationId)
+ if (idx !== -1) history.splice(idx, 1)
+ }
+ if (activeRun.value.get(run.scriptName) === operationId) {
+ activeRun.value.delete(run.scriptName)
+ }
+ }
+
+ return {
+ runs,
+ logs,
+ activeRun,
+ runHistory,
+ isRunning,
+ getRunsForScript,
+ getLogsForRun,
+ handleEvent,
+ clearRun,
+ }
+})
diff --git a/src/client/stores/ui.ts b/src/client/stores/ui.ts
index 59b6202..f71291d 100644
--- a/src/client/stores/ui.ts
+++ b/src/client/stores/ui.ts
@@ -2,34 +2,17 @@ import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useUiStore = defineStore('ui', () => {
- // Dialog states
const isOperationLogOpen = ref(false)
-
- // Selected package for detail view
const selectedPackage = ref(null)
- // Actions
- function openOperationLog() {
- isOperationLogOpen.value = true
- }
-
- function closeOperationLog() {
- isOperationLogOpen.value = false
- }
-
- function toggleOperationLog() {
- isOperationLogOpen.value = !isOperationLogOpen.value
- }
-
- function selectPackage(name: string | null) {
- selectedPackage.value = name
- }
+ function openOperationLog() { isOperationLogOpen.value = true }
+ function closeOperationLog() { isOperationLogOpen.value = false }
+ function toggleOperationLog() { isOperationLogOpen.value = !isOperationLogOpen.value }
+ function selectPackage(name: string | null) { selectedPackage.value = name }
return {
- // State
isOperationLogOpen,
selectedPackage,
- // Actions
openOperationLog,
closeOperationLog,
toggleOperationLog,
diff --git a/src/client/views/ActivityView.vue b/src/client/views/ActivityView.vue
index 16c65f2..afcbdfe 100644
--- a/src/client/views/ActivityView.vue
+++ b/src/client/views/ActivityView.vue
@@ -23,6 +23,7 @@ const TYPE_BADGE: Record = {
audit: 'bg-blue-500/10 text-blue-700 dark:text-blue-400',
'audit-fix': 'bg-green-500/10 text-green-700 dark:text-green-400',
'audit-log': 'bg-blue-500/10 text-blue-700 dark:text-blue-400',
+ script: 'bg-purple-500/10 text-purple-700 dark:text-purple-400',
}
const TYPE_LABEL: Record = {
@@ -32,6 +33,7 @@ const TYPE_LABEL: Record = {
audit: 'Audit',
'audit-fix': 'Fix',
'audit-log': 'Audit',
+ script: 'Script',
}
// ── Stats ──────────────────────────────────────────────────────────────────────
diff --git a/src/client/views/DependenciesView.vue b/src/client/views/DependenciesView.vue
index 90d2687..9f03c76 100644
--- a/src/client/views/DependenciesView.vue
+++ b/src/client/views/DependenciesView.vue
@@ -3,6 +3,7 @@ import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import PackageList from '@/components/packages/PackageList.vue'
import OutdatedCard from '@/components/dashboard/OutdatedCard.vue'
+import DepcheckPanel from '@/components/packages/DepcheckPanel.vue'
import OperationToast from '@/components/operations/OperationToast.vue'
import { ConfirmDialog } from '@/components/ui/confirm-dialog'
import { Button } from '@/components/ui/button'
@@ -75,11 +76,14 @@ function handleSelectPackage(name: string) {
@select="handleSelectPackage"
/>
-
+
+
+
+
+
+
+
+ Scripts
+
+
+
+
+
+
+
+
+ package.json scripts
+
+
+
+
+
+
+
+
+ No scripts found in package.json
+
+
+
+ -
+
+
+
+ {{ script.name }}
+
+
+ {{ script.command }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ selectedScript }}
+ Select a script
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Select a script from the left to get started
+
+
+
+
+
Click Run to execute this script
+
+
+ ▶ Running…
+
+
+ ✔ Exited with code {{ currentRun.exitCode }}
+
+
+ ✖ Exited with code {{ currentRun.exitCode }}
+
+
+
+ {{ stripAnsi(log.data) }}
+
+
+
+ Waiting for output…
+
+
+
+
+ 
+ 
+ 
+ 
+
+