Förslagsmotorn: Generera-knapp, schema, diskcache och bläddringssida

- suggest.js: samlar signaler (Lidarr-bibliotek, Jellyfin senast spelat, Youtubarr-DB senast tillagt/gillat via better-sqlite3 ro), bygger svensk Gemini-prompt (JSON-svar), berikar förslagen med MBID/omslag via Lidarrs metadata-API, cachar batcher i /data/suggestions.json - API: POST /api/suggest/run, GET latest (10 senaste till Upptäck), GET batches + batches/:id (bläddring) - Schemaläggare i server.js: kollar var 10:e minut mot inställningen suggest.intervalHours (default 24, 0 = av) — ställs in under ⚙ - Upptäck: senaste 10 som kort med motivering + '✨ Generera nya förslag'; ny Förslag-sida bläddrar alla cachade batcher; delat MusicCard-kort (sök + förslag) med Hämta-knapp - Dockerfile: byggverktyg för better-sqlite3; 4 nya tester, totalt 25 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01824ZrvG2mDYYrmwqypLNup
2026-08-01 01:43:07 +02:00
parent 81a824f005
commit 94065f6c11
15 changed files with 817 additions and 130 deletions
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -11,6 +11,7 @@
        "@fastify/cookie": "^11.0.2",
        "@fastify/session": "^11.1.0",
        "@fastify/static": "^8.1.1",
+        "better-sqlite3": "^13.0.2",
        "fastify": "^5.3.2"
      }
    },
@@ -345,6 +346,18 @@
        "node": "18 || 20 || >=22"
      }
    },
+    "node_modules/better-sqlite3": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-13.0.2.tgz",
+      "integrity": "sha512-jW6oufeDhXZaiX9Lw5A+oerVClx4iFrI6uDj1zu7SqUAjak9vbJvA0NEcKLNxHiQHb6kYCoFzzXYV0YOauhV3g==",
+      "license": "MIT",
+      "dependencies": {
+        "node-addon-api": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=22"
+      }
+    },
    "node_modules/brace-expansion": {
      "version": "5.0.9",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
@@ -785,6 +798,15 @@
        "node": ">=16 || 14 >=14.17"
      }
    },
+    "node_modules/node-addon-api": {
+      "version": "8.9.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-8.9.1.tgz",
+      "integrity": "sha512-4eUQWVPCUUUiBjLnHS3cXWeC6ryoPUc0U3rP7IuzapoGbzMqd/r6KKO0clr0b+snQhsrueFEhCZDdK+LK7hxKg==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18 || ^20 || >= 21"
+      }
+    },
    "node_modules/on-exit-leak-free": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/on-exit-leak-free/-/on-exit-leak-free-2.1.2.tgz",
--- a/backend/package.json
+++ b/backend/package.json
@@ -12,6 +12,7 @@
    "@fastify/cookie": "^11.0.2",
    "@fastify/session": "^11.1.0",
    "@fastify/static": "^8.1.1",
+    "better-sqlite3": "^13.0.2",
    "fastify": "^5.3.2"
  }
 }
--- a/backend/src/app.js
+++ b/backend/src/app.js
@@ -12,6 +12,7 @@ import { mapLidarrSearch } from './mapping.js'
 import { settingsStore } from './settings.js'
 import { makeTesters } from './testers.js'
 import { ytmusicFlow } from './ytmusic.js'
+import { suggestEngine } from './suggest.js'

 const __dirname = path.dirname(fileURLToPath(import.meta.url))

@@ -30,6 +31,7 @@ export function buildApp(config, deps = {}) {
  const store = deps.store ?? settingsStore(config.dataDir ?? '/data')
  const testers = deps.testers ?? makeTesters({ config, store })
  const ytmusic = deps.ytmusic ?? ytmusicFlow({ config, store })
+  const suggest = deps.suggest ?? suggestEngine({ config, store, lidarr })
  const app = Fastify({ logger: true, trustProxy: true })

  app.register(fastifyCookie)
@@ -164,6 +166,9 @@ export function buildApp(config, deps = {}) {
        clientSecretSet: Boolean(s.ytmusic?.clientSecret),
        connected: existsSync(ytmusic.oauthPath),
      },
+      suggest: {
+        intervalHours: s.suggest?.intervalHours ?? 24,
+      },
    }
  })

@@ -182,10 +187,51 @@ export function buildApp(config, deps = {}) {
        clientId: body.ytmusic?.clientId,
        clientSecret: body.ytmusic?.clientSecret,
      },
+      suggest: {
+        intervalHours:
+          body.suggest?.intervalHours === undefined || body.suggest?.intervalHours === null
+            ? undefined
+            : Math.max(0, Number(body.suggest.intervalHours) || 0),
+      },
    })
    return { ok: true }
  })

+  app.post('/api/suggest/run', async (req, reply) => {
+    try {
+      const batch = await suggest.run('manuell')
+      return { ok: true, batchId: batch.id, count: batch.items.length }
+    } catch (err) {
+      req.log.error({ err }, 'förslagsgenerering misslyckades')
+      return reply.code(502).send({ error: err.message })
+    }
+  })
+
+  app.get('/api/suggest/latest', async () => {
+    const s = store.load()
+    return {
+      items: suggest.latest(10),
+      lastRun: suggest.lastRun(),
+      intervalHours: s.suggest?.intervalHours ?? 24,
+    }
+  })
+
+  app.get('/api/suggest/batches', async () => {
+    return suggest.loadBatches().map((b) => ({
+      id: b.id,
+      createdAt: b.createdAt,
+      trigger: b.trigger,
+      count: b.items.length,
+      signalCounts: b.signalCounts,
+    }))
+  })
+
+  app.get('/api/suggest/batches/:id', async (req, reply) => {
+    const batch = suggest.loadBatches().find((b) => b.id === Number(req.params.id))
+    if (!batch) return reply.code(404).send({ error: 'batchen finns inte' })
+    return batch
+  })
+
  app.post('/api/ytmusic/start', async (req, reply) => {
    try {
      const out = await ytmusic.start()
@@ -226,5 +272,8 @@ export function buildApp(config, deps = {}) {
    })
  }

+  app.decorate('suggest', suggest)
+  app.decorate('settingsStore', store)
+
  return app
 }
--- a/backend/src/lidarr.js
+++ b/backend/src/lidarr.js
@@ -26,6 +26,7 @@ export function lidarrClient(config) {

  return {
    search: (term) => req('GET', `/api/v1/search?term=${encodeURIComponent(term)}`),
+    artists: () => req('GET', '/api/v1/artist'),
    addArtist: (payload) => req('POST', '/api/v1/artist', payload),
    addAlbum: (payload) => req('POST', '/api/v1/album', payload),
  }
--- a/backend/src/server.js
+++ b/backend/src/server.js
@@ -14,3 +14,21 @@ app.listen({ port: config.port, host: config.host }).catch((err) => {
  app.log.error(err)
  process.exit(1)
 })
+
+// Schemaläggaren: var 10:e minut, kolla om det är dags för en ny
+// förslags-batch (intervall i timmar från inställningarna; 0 = av).
+const CHECK_MS = 10 * 60 * 1000
+setInterval(async () => {
+  try {
+    const hours = app.settingsStore.load().suggest?.intervalHours ?? 24
+    if (!hours) return
+    const last = app.suggest.lastRun()
+    const due = !last || Date.now() - Date.parse(last) >= hours * 3600 * 1000
+    if (!due) return
+    app.log.info('schemalagd förslagsgenerering startar')
+    const batch = await app.suggest.run('schemalagd')
+    app.log.info(`schemalagd batch #${batch.id} klar med ${batch.items.length} förslag`)
+  } catch (err) {
+    app.log.warn({ err }, 'schemalagd förslagsgenerering misslyckades')
+  }
+}, CHECK_MS)
--- a/backend/src/suggest.js
+++ b/backend/src/suggest.js
@@ -0,0 +1,190 @@
+import Database from 'better-sqlite3'
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'node:fs'
+import path from 'node:path'
+import { effectiveConfig } from './settings.js'
+import { mapLidarrSearch } from './mapping.js'
+
+// Förslagsmotorn: samlar smak-signaler (Lidarr-bibliotek, Jellyfin-historik,
+// YT Music-tillägg via Youtubarrs databas), ber Gemini om nya förslag,
+// berikar med MBID/omslag via Lidarrs metadata-API och cachar batcher
+// på disk (/data/suggestions.json).
+export function suggestEngine({ config, store, lidarr, fetchImpl = fetch }) {
+  const file = path.join(config.dataDir ?? '/data', 'suggestions.json')
+
+  function loadBatches() {
+    try {
+      return JSON.parse(readFileSync(file, 'utf8'))
+    } catch {
+      return []
+    }
+  }
+
+  function saveBatches(batches) {
+    mkdirSync(path.dirname(file), { recursive: true })
+    writeFileSync(file, JSON.stringify(batches, null, 2))
+  }
+
+  async function collectSignals() {
+    const eff = effectiveConfig(config, store.load())
+    const signals = { bibliotek: [], nyligenSpelat: [], nyligenTillagt: [] }
+
+    try {
+      const artists = await lidarr.artists()
+      signals.bibliotek = artists.map((a) => a.artistName).slice(0, 150)
+    } catch {
+      /* biblioteket är tomt eller Lidarr nere — kör vidare */
+    }
+
+    if (eff.jellyfin.apiKey && eff.jellyfin.userId) {
+      try {
+        const url =
+          `${eff.jellyfin.url}/Users/${eff.jellyfin.userId}/Items` +
+          `?IncludeItemTypes=Audio&SortBy=DatePlayed&SortOrder=Descending` +
+          `&Filters=IsPlayed&Recursive=true&Limit=30`
+        const res = await fetchImpl(url, { headers: { 'X-Emby-Token': eff.jellyfin.apiKey } })
+        if (res.ok) {
+          const js = await res.json()
+          signals.nyligenSpelat = (js.Items ?? []).map(
+            (i) => `${(i.Artists ?? [])[0] ?? i.AlbumArtist ?? '?'} – ${i.Name}`,
+          )
+        }
+      } catch {
+        /* Jellyfin nere — kör vidare */
+      }
+    }
+
+    try {
+      if (existsSync(config.youtubarr.dbPath)) {
+        const db = new Database(config.youtubarr.dbPath, { readonly: true, fileMustExist: true })
+        const rows = db
+          .prepare(
+            `SELECT ti.title, ti.artist_name_guess, p.title AS playlist
+             FROM youtubarr_trackitem ti
+             LEFT JOIN youtubarr_playlist p ON p.id = ti.playlist_id
+             WHERE ti.blacklisted = 0
+             ORDER BY ti.id DESC LIMIT 40`,
+          )
+          .all()
+        db.close()
+        signals.nyligenTillagt = rows.map(
+          (r) => `${r.artist_name_guess || '?'} – ${r.title}${r.playlist ? ` [${r.playlist}]` : ''}`,
+        )
+      }
+    } catch {
+      /* databasen saknas/låst — kör vidare */
+    }
+
+    return signals
+  }
+
+  function buildPrompt(signals) {
+    return [
+      'Du är en kunnig musikrekommendatör. Utifrån signalerna nedan, föreslå',
+      'exakt 10 artister eller album som användaren troligen skulle gilla men',
+      'som INTE redan finns i biblioteket. Blanda gärna kända och smalare val.',
+      'Svara ENBART med en JSON-array i formatet:',
+      '[{"type":"artist"|"album","name":"...","artist":"...","motivation":"..."}]',
+      'där "artist" bara sätts för album, och "motivation" är en kort svensk',
+      'mening om varför förslaget passar.',
+      '',
+      `Bibliotek (föreslå INTE dessa): ${signals.bibliotek.join(', ') || '(tomt)'}`,
+      '',
+      `Nyligen spelat: ${signals.nyligenSpelat.join('; ') || '(ingen data)'}`,
+      '',
+      `Nyligen tillagt/gillat på YouTube Music: ${signals.nyligenTillagt.join('; ') || '(ingen data)'}`,
+    ].join('\n')
+  }
+
+  async function callGemini(signals) {
+    const eff = effectiveConfig(config, store.load())
+    if (!eff.gemini.apiKey) throw new Error('Gemini-nyckel saknas — lägg in den under ⚙ Inställningar')
+    const res = await fetchImpl(
+      `https://generativelanguage.googleapis.com/v1beta/models/${encodeURIComponent(eff.gemini.model)}:generateContent?key=${encodeURIComponent(eff.gemini.apiKey)}`,
+      {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          contents: [{ parts: [{ text: buildPrompt(signals) }] }],
+          generationConfig: { responseMimeType: 'application/json', temperature: 1.0 },
+        }),
+      },
+    )
+    if (!res.ok) {
+      const t = await res.text().catch(() => '')
+      throw new Error(`Gemini svarade ${res.status}: ${t.slice(0, 150)}`)
+    }
+    const js = await res.json()
+    const text = js.candidates?.[0]?.content?.parts?.[0]?.text ?? '[]'
+    const clean = text.replace(/^```(json)?\s*|\s*```$/g, '').trim()
+    const arr = JSON.parse(clean)
+    if (!Array.isArray(arr)) throw new Error('Gemini gav inte en JSON-array')
+    return arr
+  }
+
+  async function enrich(rawItems) {
+    const out = []
+    for (const it of rawItems.slice(0, 12)) {
+      const kind = it.type === 'album' ? 'album' : 'artist'
+      const card = {
+        kind,
+        name: it.name,
+        secondary: kind === 'album' ? (it.artist ?? '') : '',
+        motivation: it.motivation ?? '',
+        year: '',
+        mbid: null,
+        poster: null,
+        inLibrary: false,
+      }
+      try {
+        const term = kind === 'album' && it.artist ? `${it.artist} ${it.name}` : it.name
+        const hit = mapLidarrSearch(await lidarr.search(term), kind)[0]
+        if (hit) {
+          card.mbid = hit.mbid
+          card.poster = hit.poster
+          card.inLibrary = hit.inLibrary
+          card.year = hit.year
+          if (kind === 'album' && hit.secondary) card.secondary = hit.secondary
+        }
+      } catch {
+        /* berikning är best-effort */
+      }
+      out.push(card)
+    }
+    return out
+  }
+
+  return {
+    file,
+    loadBatches,
+
+    latest(limit = 10) {
+      const items = loadBatches().flatMap((b) => b.items)
+      return items.slice(0, limit)
+    },
+
+    lastRun() {
+      return loadBatches()[0]?.createdAt ?? null
+    },
+
+    async run(trigger = 'manuell') {
+      const signals = await collectSignals()
+      const raw = await callGemini(signals)
+      const items = await enrich(raw)
+      const batches = loadBatches()
+      const batch = {
+        id: (batches[0]?.id ?? 0) + 1,
+        createdAt: new Date().toISOString(),
+        trigger,
+        signalCounts: {
+          bibliotek: signals.bibliotek.length,
+          spelat: signals.nyligenSpelat.length,
+          tillagt: signals.nyligenTillagt.length,
+        },
+        items,
+      }
+      batches.unshift(batch)
+      saveBatches(batches)
+      return batch
+    },
+  }
+}
--- a/backend/test/suggest.test.js
+++ b/backend/test/suggest.test.js
@@ -0,0 +1,117 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { existsSync, mkdtempSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import path from 'node:path'
+import Database from 'better-sqlite3'
+import { settingsStore } from '../src/settings.js'
+import { suggestEngine } from '../src/suggest.js'
+
+function makeYoutubarrDb(dir) {
+  const p = path.join(dir, 'db.sqlite3')
+  const db = new Database(p)
+  db.exec(`
+    CREATE TABLE youtubarr_playlist (id INTEGER PRIMARY KEY, title TEXT);
+    CREATE TABLE youtubarr_trackitem (
+      id INTEGER PRIMARY KEY, playlist_id INTEGER, title TEXT,
+      artist_name_guess TEXT, blacklisted INTEGER DEFAULT 0
+    );
+    INSERT INTO youtubarr_playlist VALUES (1, 'lefu-Musick');
+    INSERT INTO youtubarr_trackitem VALUES (1, 1, 'Amaranth', 'Nightwish', 0);
+    INSERT INTO youtubarr_trackitem VALUES (2, 1, 'Svart', 'Hemligt Band', 1);
+  `)
+  db.close()
+  return p
+}
+
+function setup({ geminiResponse } = {}) {
+  const dataDir = mkdtempSync(path.join(tmpdir(), 'lyssnarr-sug-'))
+  const ytDir = mkdtempSync(path.join(tmpdir(), 'lyssnarr-ytdb-'))
+  const store = settingsStore(dataDir)
+  store.save({ gemini: { apiKey: 'g-nyckel' }, jellyfin: { apiKey: 'jf', userId: 'u1' } })
+  const config = {
+    dataDir,
+    gemini: { apiKey: '', model: 'gemini-2.5-flash' },
+    jellyfin: { url: 'http://jellyfin:8096', apiKey: '' },
+    youtubarr: { dbPath: makeYoutubarrDb(ytDir), dataDir: ytDir },
+  }
+  const lidarr = {
+    artists: async () => [{ artistName: 'Powerwolf' }],
+    search: async () => [
+      {
+        artist: {
+          foreignArtistId: 'mbid-x',
+          artistName: 'Sabaton',
+          images: [{ coverType: 'poster', remoteUrl: 'http://img/s.jpg' }],
+        },
+      },
+    ],
+  }
+  const calls = []
+  const fetchImpl = async (url, opts) => {
+    calls.push(url)
+    if (url.includes('generativelanguage')) {
+      const body = JSON.parse(opts.body)
+      fetchImpl.prompt = body.contents[0].parts[0].text
+      return {
+        ok: true,
+        json: async () => ({
+          candidates: [{ content: { parts: [{ text: geminiResponse ?? JSON.stringify([
+            { type: 'artist', name: 'Sabaton', motivation: 'Powermetal som Powerwolf.' },
+          ]) }] } }],
+        }),
+      }
+    }
+    if (url.includes('/Users/u1/Items')) {
+      return { ok: true, json: async () => ({ Items: [{ Name: 'Zenit', Artists: ['1000mods'] }] }) }
+    }
+    throw new Error('oväntad url: ' + url)
+  }
+  const engine = suggestEngine({ config, store, lidarr, fetchImpl })
+  return { engine, fetchImpl, dataDir }
+}
+
+test('run: samlar signaler, frågar Gemini, berikar och cachar på disk', async () => {
+  const { engine, fetchImpl, dataDir } = setup()
+  const batch = await engine.run('manuell')
+
+  assert.match(fetchImpl.prompt, /Powerwolf/, 'biblioteket ska in i prompten')
+  assert.match(fetchImpl.prompt, /1000mods – Zenit/, 'jellyfin-historiken ska in i prompten')
+  assert.match(fetchImpl.prompt, /Nightwish – Amaranth \[lefu-Musick\]/, 'YT-tillägg ska in i prompten')
+  assert.ok(!fetchImpl.prompt.includes('Hemligt Band'), 'svartlistade låtar ska inte med')
+
+  assert.equal(batch.items.length, 1)
+  const item = batch.items[0]
+  assert.equal(item.name, 'Sabaton')
+  assert.equal(item.mbid, 'mbid-x')
+  assert.equal(item.poster, 'http://img/s.jpg')
+  assert.equal(item.motivation, 'Powermetal som Powerwolf.')
+
+  assert.ok(existsSync(path.join(dataDir, 'suggestions.json')))
+  assert.equal(engine.latest(10).length, 1)
+  assert.equal(engine.lastRun(), batch.createdAt)
+})
+
+test('run: batch-id räknas upp och latest tar nyaste först', async () => {
+  const { engine } = setup()
+  const b1 = await engine.run()
+  const b2 = await engine.run()
+  assert.equal(b2.id, b1.id + 1)
+  assert.equal(engine.loadBatches().length, 2)
+  assert.equal(engine.loadBatches()[0].id, b2.id)
+})
+
+test('run: markdown-staket runt JSON hanteras', async () => {
+  const { engine } = setup({
+    geminiResponse: '```json\n[{"type":"artist","name":"Ghost","motivation":"x"}]\n```',
+  })
+  const batch = await engine.run()
+  assert.equal(batch.items[0].name, 'Ghost')
+})
+
+test('run utan Gemini-nyckel ger begripligt fel', async () => {
+  const { engine, dataDir } = setup()
+  const store = settingsStore(dataDir)
+  store.save({ gemini: { apiKey: '' } })
+  await assert.rejects(() => engine.run(), /Gemini-nyckel saknas/)
+})
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -9,6 +9,9 @@ COPY frontend/ ./
 RUN npm run build

 FROM node:22-slim AS backend
+# python3/make/g++ behövs om better-sqlite3 saknar prebuilt för plattformen
+RUN apt-get update && apt-get install -y --no-install-recommends python3 make g++ \
+  && rm -rf /var/lib/apt/lists/*
 WORKDIR /app
 COPY backend/package.json backend/package-lock.json ./
 RUN npm ci --omit=dev --no-audit --no-fund
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -33,6 +33,7 @@ async function logout() {
      </select>
      <input v-model="q" type="search" placeholder="Sök musik att hämta…" />
    </form>
+    <router-link class="navlink" :to="{ name: 'suggestions' }">Förslag</router-link>
    <router-link class="ghost gear" :to="{ name: 'settings' }" title="Inställningar">⚙</router-link>
    <button class="ghost" @click="logout">Logga ut</button>
  </header>
@@ -101,6 +102,16 @@ async function logout() {
  text-decoration: none;
 }

+.navlink {
+  color: var(--text-dim);
+  white-space: nowrap;
+}
+
+.navlink:hover,
+.navlink.router-link-active {
+  color: var(--text);
+}
+
 .ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
--- a/frontend/src/components/MusicCard.vue
+++ b/frontend/src/components/MusicCard.vue
@@ -0,0 +1,137 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({ item: { type: Object, required: true } })
+const state = ref('') // '' | 'busy' | 'done' | 'fanns' | 'fel'
+
+async function grab() {
+  state.value = 'busy'
+  try {
+    const res = await fetch('/api/add', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        kind: props.item.kind,
+        mbid: props.item.mbid,
+        artistMbid: props.item.artistMbid,
+        albumMbid: props.item.albumMbid,
+      }),
+    })
+    const body = await res.json()
+    if (!res.ok) {
+      state.value = 'fel'
+      return
+    }
+    state.value = body.already ? 'fanns' : 'done'
+  } catch {
+    state.value = 'fel'
+  }
+}
+</script>
+
+<template>
+  <article class="card">
+    <div class="poster">
+      <img v-if="item.poster" :src="item.poster" alt="" loading="lazy" @error="item.poster = null" />
+      <span v-else class="note">♪</span>
+      <span class="kind">{{ { artist: 'Artist', album: 'Album', track: 'Låt' }[item.kind] }}</span>
+    </div>
+    <div class="meta">
+      <strong :title="item.name">{{ item.name }}</strong>
+      <span class="dim" :title="item.secondary">
+        {{ item.secondary }}<template v-if="item.year"> · {{ item.year }}</template>
+      </span>
+      <p v-if="item.motivation" class="motivation">{{ item.motivation }}</p>
+    </div>
+    <button v-if="item.inLibrary || state === 'fanns'" class="have" disabled>✓ I biblioteket</button>
+    <button v-else-if="state === 'done'" class="have" disabled>✓ Hämtas</button>
+    <button v-else-if="!item.mbid" class="have" disabled title="hittades inte i Lidarrs metadata">går ej att hämta</button>
+    <button v-else :disabled="state === 'busy'" @click="grab">
+      {{ state === 'busy' ? 'Lägger till…' : state === 'fel' ? 'Försök igen' : '⤓ Hämta' }}
+    </button>
+  </article>
+</template>
+
+<style scoped>
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  background: var(--card);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 0.8rem;
+  padding: 0.7rem;
+  transition: background 0.15s;
+}
+
+.card:hover {
+  background: var(--card-hover);
+}
+
+.poster {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  background: linear-gradient(160deg, #312e81, #1e1b4b);
+  display: grid;
+  place-items: center;
+}
+
+.poster img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.note {
+  font-size: 2.5rem;
+  color: var(--accent-hover);
+}
+
+.kind {
+  position: absolute;
+  top: 0.4rem;
+  left: 0.4rem;
+  font-size: 0.7rem;
+  padding: 0.1rem 0.45rem;
+  border-radius: 0.4rem;
+  background: rgba(17, 24, 39, 0.8);
+  color: var(--text-dim);
+}
+
+.meta {
+  display: flex;
+  flex-direction: column;
+  min-height: 2.6rem;
+  flex: 1;
+}
+
+.meta strong,
+.meta .dim {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dim {
+  color: var(--text-dim);
+}
+
+.motivation {
+  margin: 0.3rem 0 0;
+  font-size: 0.82rem;
+  color: var(--text-dim);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.have {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: var(--text-dim);
+  cursor: default;
+}
+</style>
--- a/frontend/src/pages/DiscoverPage.vue
+++ b/frontend/src/pages/DiscoverPage.vue
@@ -1,25 +1,120 @@
 <script setup>
-// Milstolpe 1: tomt skal. Förslags-korten (Gemini) kommer i milstolpe 4,
-// sök i milstolpe 3.
+import { onMounted, ref } from 'vue'
+import MusicCard from '../components/MusicCard.vue'
+
+const items = ref([])
+const lastRun = ref(null)
+const intervalHours = ref(24)
+const busy = ref(false)
+const error = ref('')
+
+async function load() {
+  const res = await fetch('/api/suggest/latest')
+  const body = await res.json()
+  items.value = body.items
+  lastRun.value = body.lastRun
+  intervalHours.value = body.intervalHours
+}
+
+async function generate() {
+  busy.value = true
+  error.value = ''
+  try {
+    const res = await fetch('/api/suggest/run', { method: 'POST' })
+    const body = await res.json()
+    if (!res.ok) {
+      error.value = body.error ?? 'genereringen misslyckades'
+      return
+    }
+    await load()
+  } catch {
+    error.value = 'genereringen misslyckades'
+  } finally {
+    busy.value = false
+  }
+}
+
+function fmt(iso) {
+  if (!iso) return 'aldrig'
+  return new Date(iso).toLocaleString('sv-SE', { dateStyle: 'short', timeStyle: 'short' })
+}
+
+onMounted(load)
 </script>

 <template>
  <section>
-    <h2>Upptäck</h2>
-    <div class="empty">
+    <div class="head">
+      <h2>Upptäck</h2>
+      <div class="actions">
+        <span class="dim">
+          Senaste körning: {{ fmt(lastRun) }}
+          <template v-if="intervalHours"> · schema: var {{ intervalHours }}:e timme</template>
+          <template v-else> · schema: av</template>
+        </span>
+        <router-link class="link" :to="{ name: 'suggestions' }">Alla förslag →</router-link>
+        <button :disabled="busy" @click="generate">
+          {{ busy ? 'Genererar… (kan ta en halv minut)' : '✨ Generera nya förslag' }}
+        </button>
+      </div>
+    </div>
+
+    <p v-if="error" class="error">{{ error }}</p>
+
+    <div v-if="items.length" class="grid">
+      <MusicCard v-for="(r, i) in items" :key="r.mbid ?? `${r.name}-${i}`" :item="r" />
+    </div>
+
+    <div v-else class="empty">
      <p class="big">🎧</p>
      <p>Inga förslag ännu.</p>
      <p class="dim">
-        Här landar dina schemalagda Gemini-förslag — baserade på vad du
-        lyssnat på och lagt till i dina YouTube Music-spellistor.
+        Klicka på <strong>Generera nya förslag</strong> så bygger Gemini en
+        lista utifrån ditt bibliotek, vad du spelat i Jellyfin och vad du
+        lagt till på YouTube Music.
      </p>
    </div>
  </section>
 </template>

 <style scoped>
+.head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+
 h2 {
-  margin: 0 0 1rem;
+  margin: 0;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+  flex-wrap: wrap;
+}
+
+.link {
+  color: var(--accent-hover);
+}
+
+.dim {
+  color: var(--text-dim);
+  font-size: 0.88rem;
+}
+
+.error {
+  color: var(--danger);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
+  gap: 1rem;
 }

 .empty {
@@ -38,8 +133,7 @@ h2 {
  margin: 0;
 }

-.dim {
-  color: var(--text-dim);
+.empty .dim {
  max-width: 32rem;
 }
 </style>
--- a/frontend/src/pages/SearchPage.vue
+++ b/frontend/src/pages/SearchPage.vue
@@ -1,12 +1,12 @@
 <script setup>
 import { ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
+import MusicCard from '../components/MusicCard.vue'

 const route = useRoute()
 const results = ref([])
 const loading = ref(false)
 const error = ref('')
-const added = ref({}) // mbid -> 'busy' | 'done' | 'fanns'

 async function search() {
  const { q, type } = route.query
@@ -29,32 +29,6 @@ async function search() {
  }
 }

-async function grab(item) {
-  added.value = { ...added.value, [item.mbid]: 'busy' }
-  try {
-    const res = await fetch('/api/add', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        kind: item.kind,
-        mbid: item.mbid,
-        artistMbid: item.artistMbid,
-        albumMbid: item.albumMbid,
-      }),
-    })
-    const body = await res.json()
-    if (!res.ok) {
-      error.value = body.error ?? 'kunde inte hämta'
-      added.value = { ...added.value, [item.mbid]: undefined }
-      return
-    }
-    added.value = { ...added.value, [item.mbid]: body.already ? 'fanns' : 'done' }
-  } catch {
-    error.value = 'kunde inte hämta'
-    added.value = { ...added.value, [item.mbid]: undefined }
-  }
-}
-
 const typeLabel = { artist: 'artister', album: 'album', track: 'låtar' }

 watch(() => route.query, search, { immediate: true })
@@ -71,34 +45,7 @@ watch(() => route.query, search, { immediate: true })
    <p v-if="!loading && !error && results.length === 0" class="dim">Inga träffar.</p>

    <div class="grid">
-      <article v-for="r in results" :key="r.mbid" class="card">
-        <div class="poster">
-          <img v-if="r.poster" :src="r.poster" alt="" loading="lazy" @error="r.poster = null" />
-          <span v-else class="note">♪</span>
-          <span class="kind">{{ { artist: 'Artist', album: 'Album', track: 'Låt' }[r.kind] }}</span>
-        </div>
-        <div class="meta">
-          <strong :title="r.name">{{ r.name }}</strong>
-          <span class="dim" :title="r.secondary">{{ r.secondary }} <template v-if="r.year">· {{ r.year }}</template></span>
-        </div>
-        <button
-          v-if="r.inLibrary || added[r.mbid] === 'fanns'"
-          class="have"
-          disabled
-        >
-          ✓ I biblioteket
-        </button>
-        <button
-          v-else-if="added[r.mbid] === 'done'"
-          class="have"
-          disabled
-        >
-          ✓ Hämtas
-        </button>
-        <button v-else :disabled="added[r.mbid] === 'busy'" @click="grab(r)">
-          {{ added[r.mbid] === 'busy' ? 'Lägger till…' : '⤓ Hämta' }}
-        </button>
-      </article>
+      <MusicCard v-for="r in results" :key="r.mbid" :item="r" />
    </div>
  </section>
 </template>
@@ -123,70 +70,5 @@ h2 {
  gap: 1rem;
 }

-.card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-  background: var(--card);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 0.8rem;
-  padding: 0.7rem;
-  transition: background 0.15s;
-}

-.card:hover {
-  background: var(--card-hover);
-}
-
-.poster {
-  position: relative;
-  aspect-ratio: 1;
-  border-radius: 0.5rem;
-  overflow: hidden;
-  background: linear-gradient(160deg, #312e81, #1e1b4b);
-  display: grid;
-  place-items: center;
-}
-
-.poster img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.note {
-  font-size: 2.5rem;
-  color: var(--accent-hover);
-}
-
-.kind {
-  position: absolute;
-  top: 0.4rem;
-  left: 0.4rem;
-  font-size: 0.7rem;
-  padding: 0.1rem 0.45rem;
-  border-radius: 0.4rem;
-  background: rgba(17, 24, 39, 0.8);
-  color: var(--text-dim);
-}
-
-.meta {
-  display: flex;
-  flex-direction: column;
-  min-height: 2.6rem;
-}
-
-.meta strong,
-.meta .dim {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.have {
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  color: var(--text-dim);
-  cursor: default;
-}
 </style>
--- a/frontend/src/pages/SettingsPage.vue
+++ b/frontend/src/pages/SettingsPage.vue
@@ -4,7 +4,8 @@ import { onMounted, ref } from 'vue'
 const gemini = ref({ apiKey: '', model: '' })
 const jellyfin = ref({ url: '', apiKey: '', userId: '' })
 const ytmusic = ref({ clientId: '', clientSecret: '' })
-const saved = ref({ gemini: {}, jellyfin: {}, ytmusic: {} })
+const saved = ref({ gemini: {}, jellyfin: {}, ytmusic: {}, suggest: {} })
+const intervalHours = ref(24)
 const results = ref({}) // service -> {ok, message}
 const busy = ref({})
 const jfUsers = ref([])
@@ -16,8 +17,26 @@ onMounted(async () => {
  gemini.value.model = saved.value.gemini.model
  jellyfin.value.url = saved.value.jellyfin.url
  jellyfin.value.userId = saved.value.jellyfin.userId
+  intervalHours.value = saved.value.suggest?.intervalHours ?? 24
 })

+async function saveInterval() {
+  await fetch('/api/settings', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ suggest: { intervalHours: Number(intervalHours.value) } }),
+  })
+  results.value = {
+    ...results.value,
+    suggest: {
+      ok: true,
+      message: Number(intervalHours.value)
+        ? `sparat — nya förslag var ${intervalHours.value}:e timme`
+        : 'sparat — schemat är avstängt',
+    },
+  }
+}
+
 async function saveAndTest(service) {
  busy.value = { ...busy.value, [service]: true }
  results.value = { ...results.value, [service]: null }
@@ -180,6 +199,21 @@ async function connectYtMusic() {
      </div>
    </article>

+    <article class="card">
+      <h3>Förslags-schema</h3>
+      <p class="dim">
+        Hur ofta nya Gemini-förslag hämtas automatiskt. Sätt 0 för att stänga
+        av — du kan alltid klicka "Generera nya förslag" på Upptäck-sidan.
+      </p>
+      <label>Intervall (timmar)
+        <input v-model="intervalHours" type="number" min="0" step="1" />
+      </label>
+      <div class="row">
+        <button @click="saveInterval">Spara</button>
+        <span v-if="results.suggest" :class="results.suggest.ok ? 'ok' : 'fail'">{{ results.suggest.message }}</span>
+      </div>
+    </article>
+
    <article class="card">
      <h3>
        YouTube Music
--- a/frontend/src/pages/SuggestionsPage.vue
+++ b/frontend/src/pages/SuggestionsPage.vue
@@ -0,0 +1,126 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import MusicCard from '../components/MusicCard.vue'
+
+const batches = ref([])
+const selected = ref(null)
+const loading = ref(false)
+
+async function load() {
+  const res = await fetch('/api/suggest/batches')
+  batches.value = await res.json()
+  if (batches.value.length && !selected.value) pick(batches.value[0].id)
+}
+
+async function pick(id) {
+  loading.value = true
+  try {
+    const res = await fetch(`/api/suggest/batches/${id}`)
+    if (res.ok) selected.value = await res.json()
+  } finally {
+    loading.value = false
+  }
+}
+
+function fmt(iso) {
+  return new Date(iso).toLocaleString('sv-SE', { dateStyle: 'medium', timeStyle: 'short' })
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <section class="wrap">
+    <aside>
+      <h2>Förslag</h2>
+      <p v-if="!batches.length" class="dim">Inga batcher ännu — generera från Upptäck-sidan.</p>
+      <button
+        v-for="b in batches"
+        :key="b.id"
+        class="batch"
+        :class="{ active: selected?.id === b.id }"
+        @click="pick(b.id)"
+      >
+        <strong>#{{ b.id }}</strong> — {{ fmt(b.createdAt) }}
+        <span class="dim">{{ b.count }} förslag · {{ b.trigger }}</span>
+      </button>
+    </aside>
+
+    <div class="content">
+      <template v-if="selected">
+        <p class="dim">
+          Batch #{{ selected.id }} ({{ fmt(selected.createdAt) }}) — signaler:
+          {{ selected.signalCounts.bibliotek }} i biblioteket,
+          {{ selected.signalCounts.spelat }} nyligen spelade,
+          {{ selected.signalCounts.tillagt }} nyligen tillagda på YT Music
+        </p>
+        <div class="grid">
+          <MusicCard v-for="(r, i) in selected.items" :key="`${selected.id}-${r.mbid ?? i}`" :item="r" />
+        </div>
+      </template>
+      <p v-else-if="loading" class="dim">Laddar…</p>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.wrap {
+  display: grid;
+  grid-template-columns: 16rem 1fr;
+  gap: 1.5rem;
+  align-items: start;
+}
+
+@media (max-width: 50rem) {
+  .wrap {
+    grid-template-columns: 1fr;
+  }
+}
+
+h2 {
+  margin: 0 0 0.8rem;
+}
+
+aside {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  position: sticky;
+  top: 5rem;
+}
+
+.batch {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.15rem;
+  text-align: left;
+  background: var(--card);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  color: var(--text);
+  padding: 0.6rem 0.8rem;
+}
+
+.batch:hover {
+  background: var(--card-hover);
+}
+
+.batch.active {
+  border-color: var(--accent);
+}
+
+.dim {
+  color: var(--text-dim);
+  font-size: 0.85rem;
+}
+
+.content .dim {
+  margin: 0 0 1rem;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
+  gap: 1rem;
+}
+</style>
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -3,12 +3,14 @@ import DiscoverPage from './pages/DiscoverPage.vue'
 import LoginPage from './pages/LoginPage.vue'
 import SearchPage from './pages/SearchPage.vue'
 import SettingsPage from './pages/SettingsPage.vue'
+import SuggestionsPage from './pages/SuggestionsPage.vue'

 export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', name: 'discover', component: DiscoverPage },
    { path: '/search', name: 'search', component: SearchPage },
+    { path: '/forslag', name: 'suggestions', component: SuggestionsPage },
    { path: '/settings', name: 'settings', component: SettingsPage },
    { path: '/login', name: 'login', component: LoginPage },
  ],