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

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);

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>

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>

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>

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

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>

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 },
   ],