From aa18f4f52744f2ca5932a6e7fa6e383b18a2fdc6 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 28 Mar 2026 00:13:40 -0400
Subject: [PATCH] docs: add news briefing redesign spec and plan

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../2026-03-28-news-briefing-redesign.md      | 1651 +++++++++++++++++
 1 file changed, 1651 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-03-28-news-briefing-redesign.md

diff --git a/docs/superpowers/plans/2026-03-28-news-briefing-redesign.md b/docs/superpowers/plans/2026-03-28-news-briefing-redesign.md
new file mode 100644
index 0000000..725766e
--- /dev/null
+++ b/docs/superpowers/plans/2026-03-28-news-briefing-redesign.md
@@ -0,0 +1,1651 @@
+# News Feed & Briefing View Redesign Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Extend RSS article retention to 90 days, add a unified `/api/briefing/news` endpoint, redesign the briefing view into a 3-column layout (weather · chat · news), add deep article Q&A in briefing chat, and add a `/news` archive view.
+
+**Architecture:** The `rss_items` table already stores all article data — no new tables needed. A new endpoint queries it with a user-scoped join and optional feed filter. `build_context()` in `llm.py` gets a new `conv_id` param; for briefing conversations it injects source article content from the day's briefing message metadata. The Vue frontend restructures `BriefingView.vue` into a CSS grid and adds a new `NewsView.vue`.
+
+**Tech Stack:** Python/Quart, SQLAlchemy 2.0 async, raw SQL for the news query, Vue 3 + TypeScript, Pinia, existing `WeatherCard` and `ChatMessage` components.
+
+---
+
+## File Map
+
+**Modified:**
+- `src/fabledassistant/services/rss.py` — change `ITEM_MAX_AGE_DAYS` to 90
+- `src/fabledassistant/routes/briefing.py` — add `GET /api/briefing/news`
+- `src/fabledassistant/services/llm.py` — add `conv_id` param + `_build_briefing_article_context()` helper
+- `src/fabledassistant/services/generation_task.py` — pass `conv_id` to `build_context()`
+- `frontend/src/api/client.ts` — add `getNewsItems()` function, import NewsItem
+- `frontend/src/views/BriefingView.vue` — full 3-column redesign
+- `frontend/src/router/index.ts` — add `/news` route
+- `frontend/src/components/AppHeader.vue` — add News nav link
+
+**Created:**
+- `frontend/src/types/news.ts` — `NewsItem` interface
+- `frontend/src/views/NewsView.vue` — news archive view
+- `tests/test_news_api.py` — backend unit tests
+
+---
+
+### Task 1: RSS article retention (90 days)
+
+**Files:**
+- Modify: `src/fabledassistant/services/rss.py:15-17` and `:135-141`
+- Test: `tests/test_news_api.py`
+
+- [ ] **Step 1: Write the failing test**
+
+```python
+# tests/test_news_api.py
+def test_rss_item_max_age_is_90_days():
+    """Retention window should be 90 days."""
+    from fabledassistant.services.rss import ITEM_MAX_AGE_DAYS
+    assert ITEM_MAX_AGE_DAYS == 90
+```
+
+- [ ] **Step 2: Run to verify it fails**
+
+```bash
+cd /home/bvandeusen/Nextcloud/Projects/fabledassistant
+source .venv/bin/activate
+pytest tests/test_news_api.py::test_rss_item_max_age_is_90_days -v
+```
+Expected: FAIL — `AssertionError: assert 14 == 90`
+
+- [ ] **Step 3: Update `rss.py`**
+
+Change line 16 and the SQL interval in `_prune_old_items`:
+
+```python
+# Line 16 — was: ITEM_MAX_AGE_DAYS = 14
+ITEM_MAX_AGE_DAYS = 90
+```
+
+In `_prune_old_items` (around line 135), change the SQL:
+```python
+async def _prune_old_items(feed_id: int) -> None:
+    """Delete items older than ITEM_MAX_AGE_DAYS from a feed."""
+    async with async_session() as session:
+        await session.execute(
+            text("""
+                DELETE FROM rss_items
+                WHERE feed_id = :feed_id
+                  AND published_at < NOW() - INTERVAL '90 days'
+            """).bindparams(feed_id=feed_id)
+        )
+        await session.commit()
+```
+
+- [ ] **Step 4: Run to verify it passes**
+
+```bash
+pytest tests/test_news_api.py::test_rss_item_max_age_is_90_days -v
+```
+Expected: PASS
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/fabledassistant/services/rss.py tests/test_news_api.py
+git commit -m "feat: extend RSS item retention from 14 to 90 days"
+```
+
+---
+
+### Task 2: `GET /api/briefing/news` endpoint
+
+**Files:**
+- Modify: `src/fabledassistant/routes/briefing.py`
+- Test: `tests/test_news_api.py`
+
+- [ ] **Step 1: Write the failing test**
+
+Add to `tests/test_news_api.py`:
+
+```python
+import pytest
+from unittest.mock import AsyncMock, MagicMock, patch
+from datetime import datetime, timezone
+
+
+def _make_mock_session(rows):
+    """Return a mock async context manager whose session.execute returns rows."""
+    mock_result = MagicMock()
+    mock_result.mappings.return_value.all.return_value = rows
+
+    mock_session = AsyncMock()
+    mock_session.execute = AsyncMock(return_value=mock_result)
+
+    mock_cm = MagicMock()
+    mock_cm.__aenter__ = AsyncMock(return_value=mock_session)
+    mock_cm.__aexit__ = AsyncMock(return_value=False)
+    return mock_cm
+
+
+@pytest.mark.asyncio
+async def test_list_news_formats_items_correctly():
+    """list_news service logic should truncate content to 300 chars and include reaction."""
+    pub = datetime(2026, 3, 28, 8, 0, tzinfo=timezone.utc)
+    rows = [
+        {
+            "id": 1,
+            "title": "EU AI Act deadline",
+            "url": "https://example.com/ai",
+            "content": "x" * 500,  # should be truncated to 300
+            "published_at": pub,
+            "topics": ["tech"],
+            "feed_title": "TechCrunch",
+            "reaction": "up",
+        }
+    ]
+
+    # Import and call the formatting logic directly
+    # We test the item serialisation used in the route
+    item = rows[0]
+    result = {
+        "id": item["id"],
+        "title": item["title"],
+        "url": item["url"],
+        "snippet": (item["content"] or "")[:300],
+        "published_at": item["published_at"].isoformat() if item["published_at"] else None,
+        "topics": item["topics"] or [],
+        "source": item["feed_title"],
+        "reaction": item["reaction"],
+    }
+
+    assert result["snippet"] == "x" * 300
+    assert result["source"] == "TechCrunch"
+    assert result["reaction"] == "up"
+    assert result["published_at"] == pub.isoformat()
+```
+
+- [ ] **Step 2: Run to verify it passes already (pure logic test)**
+
+```bash
+pytest tests/test_news_api.py::test_list_news_formats_items_correctly -v
+```
+Expected: PASS (no imports needed — pure dict manipulation)
+
+- [ ] **Step 3: Add the `list_news` route to `routes/briefing.py`**
+
+Add after the `recent_items` route (around line 124), before the weather section:
+
+```python
+@briefing_bp.route("/news", methods=["GET"])
+@_REQUIRE
+async def list_news():
+    """Unified news endpoint for briefing panel (days=2) and archive view (days=90)."""
+    days = min(int(request.args.get("days", 2)), 90)
+    limit = min(int(request.args.get("limit", 40)), 100)
+    offset = max(int(request.args.get("offset", 0)), 0)
+    feed_id = request.args.get("feed_id", type=int)
+
+    from sqlalchemy import text as _text
+    async with async_session() as session:
+        result = await session.execute(
+            _text("""
+                SELECT
+                    i.id, i.title, i.url, i.content, i.published_at,
+                    i.topics, f.title AS feed_title,
+                    r.reaction
+                FROM rss_items i
+                JOIN rss_feeds f ON f.id = i.feed_id
+                LEFT JOIN rss_item_reactions r
+                    ON r.rss_item_id = i.id AND r.user_id = :uid
+                WHERE f.user_id = :uid
+                  AND (:feed_id IS NULL OR f.id = :feed_id)
+                  AND i.published_at >= NOW() - make_interval(days => :days)
+                ORDER BY i.published_at DESC NULLS LAST
+                LIMIT :limit OFFSET :offset
+            """).bindparams(uid=g.user.id, days=days, limit=limit,
+                            offset=offset, feed_id=feed_id)
+        )
+        rows = result.mappings().all()
+
+    items = [
+        {
+            "id": r["id"],
+            "title": r["title"],
+            "url": r["url"],
+            "snippet": (r["content"] or "")[:300],
+            "published_at": r["published_at"].isoformat() if r["published_at"] else None,
+            "topics": r["topics"] or [],
+            "source": r["feed_title"],
+            "reaction": r["reaction"],
+        }
+        for r in rows
+    ]
+    return jsonify({"items": items, "offset": offset, "limit": limit})
+```
+
+- [ ] **Step 4: Run the existing test suite to check nothing broke**
+
+```bash
+pytest tests/ -v --tb=short 2>&1 | tail -20
+```
+Expected: all existing tests pass
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/fabledassistant/routes/briefing.py tests/test_news_api.py
+git commit -m "feat: add GET /api/briefing/news unified news endpoint"
+```
+
+---
+
+### Task 3: Deep article Q&A in briefing chat
+
+**Files:**
+- Modify: `src/fabledassistant/services/llm.py`
+- Modify: `src/fabledassistant/services/generation_task.py:180-188`
+- Test: `tests/test_news_api.py`
+
+- [ ] **Step 1: Write the failing tests**
+
+Add to `tests/test_news_api.py`:
+
+```python
+@pytest.mark.asyncio
+async def test_build_briefing_article_context_empty_when_no_metadata():
+    """Returns empty string when no briefing message has rss_item_ids."""
+    mock_msg = MagicMock()
+    mock_msg.msg_metadata = {}  # no rss_item_ids key
+    mock_msg.role = "assistant"
+
+    mock_result = MagicMock()
+    mock_result.scalars.return_value.all.return_value = [mock_msg]
+
+    mock_session = AsyncMock()
+    mock_session.execute = AsyncMock(return_value=mock_result)
+
+    mock_cm = MagicMock()
+    mock_cm.__aenter__ = AsyncMock(return_value=mock_session)
+    mock_cm.__aexit__ = AsyncMock(return_value=False)
+
+    with patch("fabledassistant.models.async_session", return_value=mock_cm):
+        from fabledassistant.services.llm import _build_briefing_article_context
+        result = await _build_briefing_article_context(conv_id=1)
+
+    assert result == ""
+
+
+@pytest.mark.asyncio
+async def test_build_briefing_article_context_returns_formatted_string():
+    """Returns ARTICLE CONTEXT block with titles and content from rss_item_ids."""
+    mock_msg = MagicMock()
+    mock_msg.msg_metadata = {"rss_item_ids": [1, 2]}
+    mock_msg.role = "assistant"
+
+    # First session: Message query
+    mock_result1 = MagicMock()
+    mock_result1.scalars.return_value.all.return_value = [mock_msg]
+    mock_session1 = AsyncMock()
+    mock_session1.execute = AsyncMock(return_value=mock_result1)
+    mock_cm1 = MagicMock()
+    mock_cm1.__aenter__ = AsyncMock(return_value=mock_session1)
+    mock_cm1.__aexit__ = AsyncMock(return_value=False)
+
+    # Second session: rss_items query
+    rows = [
+        {"title": "EU AI Act deadline", "url": "https://example.com/ai",
+         "content": "The EU has confirmed deadlines.", "feed_title": "TechCrunch"},
+    ]
+    mock_result2 = MagicMock()
+    mock_result2.mappings.return_value.all.return_value = rows
+    mock_session2 = AsyncMock()
+    mock_session2.execute = AsyncMock(return_value=mock_result2)
+    mock_cm2 = MagicMock()
+    mock_cm2.__aenter__ = AsyncMock(return_value=mock_session2)
+    mock_cm2.__aexit__ = AsyncMock(return_value=False)
+
+    with patch("fabledassistant.models.async_session", side_effect=[mock_cm1, mock_cm2]):
+        import importlib
+        import fabledassistant.services.llm as llm_mod
+        importlib.reload(llm_mod)
+        result = await llm_mod._build_briefing_article_context(conv_id=42)
+
+    assert "ARTICLE CONTEXT" in result
+    assert "EU AI Act deadline" in result
+    assert "TechCrunch" in result
+    assert "The EU has confirmed" in result
+```
+
+- [ ] **Step 2: Run to verify they fail**
+
+```bash
+pytest tests/test_news_api.py::test_build_briefing_article_context_empty_when_no_metadata tests/test_news_api.py::test_build_briefing_article_context_returns_formatted_string -v
+```
+Expected: FAIL — `ImportError: cannot import name '_build_briefing_article_context'`
+
+- [ ] **Step 3: Add `_build_briefing_article_context` to `llm.py`**
+
+Add this function at the module level in `src/fabledassistant/services/llm.py`, after the `build_context` function (around line 685, after the `return messages, context_meta` line):
+
+```python
+async def _build_briefing_article_context(conv_id: int) -> str:
+    """Inject source article content into system prompt for briefing follow-up Q&A.
+
+    Finds the most recent assistant briefing message with rss_item_ids in its
+    metadata, loads those articles from DB, and returns a formatted context block.
+    Capped at 10 articles × 500 chars to keep token use reasonable.
+    """
+    import json
+    from sqlalchemy import select, text as _text
+    from fabledassistant.models import async_session
+    from fabledassistant.models.conversation import Message
+
+    rss_item_ids: list[int] = []
+
+    async with async_session() as session:
+        result = await session.execute(
+            select(Message)
+            .where(
+                Message.conversation_id == conv_id,
+                Message.role == "assistant",
+            )
+            .order_by(Message.created_at.desc())
+            .limit(10)
+        )
+        messages = result.scalars().all()
+
+    for msg in messages:
+        meta = msg.msg_metadata or {}
+        if isinstance(meta, str):
+            try:
+                meta = json.loads(meta)
+            except Exception:
+                continue
+        ids = meta.get("rss_item_ids") or []
+        if ids:
+            rss_item_ids = ids[:10]
+            break
+
+    if not rss_item_ids:
+        return ""
+
+    async with async_session() as session:
+        result = await session.execute(
+            _text("""
+                SELECT i.title, i.url, i.content, f.title AS feed_title
+                FROM rss_items i
+                JOIN rss_feeds f ON f.id = i.feed_id
+                WHERE i.id = ANY(:ids)
+                ORDER BY i.published_at DESC NULLS LAST
+                LIMIT 10
+            """).bindparams(ids=rss_item_ids)
+        )
+        rows = result.mappings().all()
+
+    if not rows:
+        return ""
+
+    lines = ["ARTICLE CONTEXT (source articles from today's briefing):"]
+    for row in rows:
+        lines.append(f"\n[{row['feed_title']}] {row['title']}")
+        if row["url"]:
+            lines.append(f"URL: {row['url']}")
+        if row["content"]:
+            lines.append(row["content"][:500])
+    return "\n".join(lines)
+```
+
+- [ ] **Step 4: Add `conv_id` param to `build_context()` and call the helper**
+
+In `src/fabledassistant/services/llm.py`, change the `build_context` signature (line 444):
+
+```python
+async def build_context(
+    user_id: int,
+    history: list[dict],
+    current_note_id: int | None,
+    user_message: str,
+    exclude_note_ids: list[int] | None = None,
+    history_summary: str | None = None,
+    include_note_ids: list[int] | None = None,
+    excluded_note_ids: list[int] | None = None,
+    rag_project_id: int | None = None,
+    workspace_project_id: int | None = None,
+    user_timezone: str | None = None,
+    conv_id: int | None = None,
+) -> tuple[list[dict], dict]:
+```
+
+Then add the briefing context injection just before the `messages = [...]` line (around line 679). The full block to add:
+
+```python
+    # Inject briefing article context for follow-up Q&A
+    if conv_id is not None:
+        from fabledassistant.models import async_session as _async_session
+        from fabledassistant.models.conversation import Conversation as _Conversation
+        async with _async_session() as _sess:
+            _conv = await _sess.get(_Conversation, conv_id)
+            if _conv and _conv.conversation_type == "briefing":
+                article_context = await _build_briefing_article_context(conv_id)
+                if article_context:
+                    system_parts.append(f"\n\n{article_context}")
+```
+
+After that block the existing code continues:
+```python
+    messages = [{"role": "system", "content": "".join(system_parts)}]
+    messages.extend(history)
+    messages.append({"role": "user", "content": user_message})
+    return messages, context_meta
+```
+
+- [ ] **Step 5: Pass `conv_id` in `generation_task.py`**
+
+In `src/fabledassistant/services/generation_task.py`, change the `build_context` call (around line 180):
+
+```python
+    context_task = asyncio.create_task(build_context(
+        user_id, history_to_use, context_note_id, user_content,
+        history_summary=history_summary,
+        include_note_ids=include_note_ids,
+        excluded_note_ids=excluded_note_ids,
+        rag_project_id=rag_project_id,
+        workspace_project_id=workspace_project_id,
+        user_timezone=user_timezone,
+        conv_id=conv_id,
+    ))
+```
+
+- [ ] **Step 6: Run the new tests**
+
+```bash
+pytest tests/test_news_api.py::test_build_briefing_article_context_empty_when_no_metadata tests/test_news_api.py::test_build_briefing_article_context_returns_formatted_string -v
+```
+Expected: PASS
+
+- [ ] **Step 7: Run full test suite**
+
+```bash
+pytest tests/ -v --tb=short 2>&1 | tail -20
+```
+Expected: all tests pass
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add src/fabledassistant/services/llm.py src/fabledassistant/services/generation_task.py tests/test_news_api.py
+git commit -m "feat: inject briefing article content into chat context for deep Q&A"
+```
+
+---
+
+### Task 4: NewsItem type + API client function
+
+**Files:**
+- Create: `frontend/src/types/news.ts`
+- Modify: `frontend/src/api/client.ts`
+
+- [ ] **Step 1: Create `frontend/src/types/news.ts`**
+
+```typescript
+export interface NewsItem {
+  id: number
+  title: string
+  url: string
+  snippet: string
+  published_at: string | null
+  topics: string[]
+  source: string
+  reaction: 'up' | 'down' | null
+}
+```
+
+- [ ] **Step 2: Add `getNewsItems` to `frontend/src/api/client.ts`**
+
+Add the import at the top of `client.ts` alongside existing imports:
+
+```typescript
+import type { NewsItem } from '@/types/news'
+```
+
+Add the function after `deleteRssReaction` (around line 428):
+
+```typescript
+export async function getNewsItems(
+  days: number = 2,
+  limit: number = 40,
+  offset: number = 0,
+  feedId?: number
+): Promise<{ items: NewsItem[]; offset: number; limit: number }> {
+  const params = new URLSearchParams({
+    days: String(days),
+    limit: String(limit),
+    offset: String(offset),
+  })
+  if (feedId != null) params.set('feed_id', String(feedId))
+  return apiGet(`/api/briefing/news?${params}`)
+}
+```
+
+- [ ] **Step 3: TypeScript check**
+
+```bash
+cd /home/bvandeusen/Nextcloud/Projects/fabledassistant/frontend
+npx tsc --noEmit 2>&1 | grep -v "SlashCommands\|TagSuggestion\|WikilinkSuggestion\|suggestionRenderer"
+```
+Expected: no new errors
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add frontend/src/types/news.ts frontend/src/api/client.ts
+git commit -m "feat: add NewsItem type and getNewsItems API client function"
+```
+
+---
+
+### Task 5: BriefingView.vue — 3-column redesign
+
+**Files:**
+- Modify: `frontend/src/views/BriefingView.vue` (full rewrite)
+
+- [ ] **Step 1: Replace the entire content of `BriefingView.vue`**
+
+```vue
+<script setup lang="ts">
+import { ref, computed, onMounted, watch, nextTick } from 'vue'
+import { useBackgroundRefresh } from '@/composables/useBackgroundRefresh'
+import { useChatStore } from '@/stores/chat'
+import ChatMessage from '@/components/ChatMessage.vue'
+import WeatherCard from '@/components/WeatherCard.vue'
+import BriefingSetupWizard from '@/components/BriefingSetupWizard.vue'
+import {
+  apiGet,
+  getBriefingConfig,
+  getBriefingConversations,
+  getBriefingToday,
+  getBriefingConvMessages,
+  triggerBriefingSlot,
+  postRssReaction,
+  deleteRssReaction,
+  type BriefingConversation,
+  type BriefingMessage,
+} from '@/api/client'
+import type { Message } from '@/types/chat'
+import type { NewsItem } from '@/types/news'
+
+// Matches WeatherCard.vue's internal WeatherData shape (structural typing)
+interface WeatherData {
+  location: string
+  fetched_at: string
+  current_temp: number
+  condition: string
+  today_high: number | null
+  today_low: number | null
+  yesterday_high: number | null
+  yesterday_low: number | null
+  forecast: { day: string; condition: string; high: number; low: number }[]
+}
+
+const chatStore = useChatStore()
+
+// Setup wizard
+const showWizard = ref(false)
+const wizardChecked = ref(false)
+
+async function checkSetup() {
+  const config = await getBriefingConfig()
+  if (!config.enabled) showWizard.value = true
+  wizardChecked.value = true
+}
+
+async function onWizardDone() {
+  showWizard.value = false
+  await loadAll()
+  loadWeather()
+  loadNews()
+}
+
+// Conversations
+const conversations = ref<BriefingConversation[]>([])
+const selectedConvId = ref<number | null>(null)
+const todayConvId = ref<number | null>(null)
+
+const isToday = computed(() => selectedConvId.value === todayConvId.value)
+
+// Messages
+const messages = ref<BriefingMessage[]>([])
+const loadingMessages = ref(false)
+
+// Weather panel
+const weatherData = ref<WeatherData[]>([])
+
+// News panel
+const newsItems = ref<NewsItem[]>([])
+const reactions = ref<Record<number, 'up' | 'down' | null>>({})
+
+// Scroll ref for messages center column
+const messagesEl = ref<HTMLElement | null>(null)
+
+function scrollToBottom() {
+  nextTick(() => {
+    if (messagesEl.value) {
+      messagesEl.value.scrollTop = messagesEl.value.scrollHeight
+    }
+  })
+}
+
+async function loadWeather() {
+  try {
+    const data = await apiGet<{ locations: WeatherData[] }>('/api/briefing/weather')
+    weatherData.value = data.locations ?? []
+  } catch { /* silent */ }
+}
+
+async function loadNews() {
+  try {
+    const data = await apiGet<{ items: NewsItem[] }>('/api/briefing/news?days=2&limit=40')
+    newsItems.value = data.items
+    for (const item of data.items) {
+      reactions.value[item.id] = item.reaction
+    }
+  } catch { /* silent */ }
+}
+
+async function loadAll() {
+  const [convList, today] = await Promise.all([
+    getBriefingConversations(),
+    getBriefingToday().catch(() => null),
+  ])
+  conversations.value = convList
+  if (today) {
+    todayConvId.value = today.id
+    if (!convList.find((c) => c.id === today.id)) {
+      conversations.value = [
+        { id: today.id, title: today.title ?? 'Today', briefing_date: null, message_count: 0, created_at: new Date().toISOString() },
+        ...convList,
+      ]
+    }
+    selectedConvId.value = today.id
+    messages.value = today.messages
+    await chatStore.fetchConversation(today.id)
+  }
+  scrollToBottom()
+}
+
+watch(selectedConvId, async (id) => {
+  if (!id) return
+  if (id === todayConvId.value) {
+    await chatStore.fetchConversation(id)
+    messages.value = (chatStore.currentConversation?.messages ?? []) as unknown as BriefingMessage[]
+    scrollToBottom()
+    return
+  }
+  loadingMessages.value = true
+  try {
+    messages.value = await getBriefingConvMessages(id)
+    scrollToBottom()
+  } finally {
+    loadingMessages.value = false
+  }
+})
+
+watch(() => chatStore.streaming, async (streaming) => {
+  if (!streaming && selectedConvId.value === todayConvId.value && todayConvId.value) {
+    const today = await getBriefingToday().catch(() => null)
+    if (today) {
+      messages.value = today.messages
+      scrollToBottom()
+    }
+  }
+})
+
+// Input
+const input = ref('')
+const sending = ref(false)
+
+async function send() {
+  const text = input.value.trim()
+  if (!text || !todayConvId.value || chatStore.streaming || sending.value) return
+  if (chatStore.currentConversation?.id !== todayConvId.value) {
+    await chatStore.fetchConversation(todayConvId.value)
+  }
+  input.value = ''
+  sending.value = true
+  try {
+    await chatStore.sendMessage(text)
+  } finally {
+    sending.value = false
+  }
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault()
+    send()
+  }
+}
+
+async function handleReaction(itemId: number, reaction: 'up' | 'down') {
+  const current = reactions.value[itemId]
+  reactions.value[itemId] = current === reaction ? null : reaction
+  try {
+    if (current === reaction) {
+      await deleteRssReaction(itemId)
+    } else {
+      await postRssReaction(itemId, reaction)
+    }
+  } catch {
+    reactions.value[itemId] = current ?? null
+  }
+}
+
+function formatRelativeDate(iso: string | null): string {
+  if (!iso) return ''
+  const d = new Date(iso)
+  const now = new Date()
+  const diffH = (now.getTime() - d.getTime()) / 3_600_000
+  if (diffH < 24) return `${Math.round(diffH)}h ago`
+  if (diffH < 48) return 'Yesterday'
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+}
+
+const triggering = ref(false)
+async function triggerNow() {
+  triggering.value = true
+  try {
+    await triggerBriefingSlot('compilation')
+    await loadAll()
+    loadNews()
+  } finally {
+    triggering.value = false
+  }
+}
+
+function convLabel(c: BriefingConversation): string {
+  if (c.id === todayConvId.value) return 'Today'
+  if (c.briefing_date) {
+    const d = new Date(c.briefing_date)
+    return d.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' })
+  }
+  return c.title || 'Briefing'
+}
+
+function toMsg(m: BriefingMessage): Message {
+  return {
+    id: m.id,
+    conversation_id: -1,
+    role: m.role,
+    content: m.content,
+    context_note_id: null,
+    context_note_title: null,
+    created_at: m.created_at,
+  }
+}
+
+async function _backgroundRefreshMessages() {
+  try {
+    const today = await getBriefingToday()
+    if (!today) return
+    const fresh = today.messages
+    const last = fresh[fresh.length - 1]
+    const cur = messages.value[messages.value.length - 1]
+    if (fresh.length !== messages.value.length || last?.content !== cur?.content) {
+      messages.value = fresh
+    }
+    await loadNews()
+  } catch { /* silent */ }
+}
+
+useBackgroundRefresh(
+  _backgroundRefreshMessages,
+  60_000,
+  () => !chatStore.streaming && isToday.value && !!todayConvId.value,
+)
+
+onMounted(async () => {
+  await checkSetup()
+  if (!showWizard.value) {
+    await loadAll()
+    loadWeather()
+    loadNews()
+  }
+})
+</script>
+
+<template>
+  <div class="briefing-root">
+    <BriefingSetupWizard v-if="wizardChecked && showWizard" @done="onWizardDone" />
+
+    <div class="briefing-shell" v-if="wizardChecked && !showWizard">
+
+      <!-- Header spans all three columns -->
+      <header class="briefing-header">
+        <div class="briefing-header-left">
+          <h1 class="briefing-title">Briefing</h1>
+          <span class="briefing-today-badge">{{ new Date().toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' }) }}</span>
+        </div>
+        <div class="briefing-header-right">
+          <select v-if="conversations.length" v-model="selectedConvId" class="briefing-conv-select">
+            <option v-for="c in conversations" :key="c.id" :value="c.id">{{ convLabel(c) }}</option>
+          </select>
+          <button
+            class="btn-trigger"
+            @click="triggerNow"
+            :disabled="triggering"
+            title="Manually trigger morning briefing now"
+          >{{ triggering ? '…' : 'Refresh' }}</button>
+        </div>
+      </header>
+
+      <!-- Left: Weather panel -->
+      <div class="briefing-left">
+        <div class="panel-label">Weather</div>
+        <template v-if="weatherData.length">
+          <WeatherCard
+            v-for="loc in weatherData"
+            :key="loc.location"
+            :weather="loc"
+          />
+        </template>
+        <div v-else class="panel-empty">No weather configured</div>
+      </div>
+
+      <!-- Center: Messages + input -->
+      <div class="briefing-center">
+        <div class="briefing-messages-wrap" ref="messagesEl">
+          <div v-if="loadingMessages" class="briefing-loading">Loading…</div>
+          <template v-else>
+            <div v-if="!messages.length" class="briefing-empty">
+              <p>No briefing yet for today.</p>
+              <p class="briefing-empty-hint">Click "Refresh" to generate a briefing now, or wait for the scheduled slot.</p>
+            </div>
+            <div v-else class="briefing-messages">
+              <template v-for="msg in messages" :key="msg.id">
+                <ChatMessage :message="toMsg(msg)" :is-streaming="false" />
+              </template>
+              <!-- Live streaming bubble -->
+              <ChatMessage
+                v-if="isToday && chatStore.streaming && chatStore.streamingContent"
+                :message="{
+                  id: -1,
+                  conversation_id: todayConvId ?? -1,
+                  role: 'assistant',
+                  content: chatStore.streamingContent,
+                  context_note_id: null,
+                  context_note_title: null,
+                  created_at: new Date().toISOString(),
+                }"
+                :is-streaming="true"
+              />
+            </div>
+          </template>
+        </div>
+
+        <div v-if="isToday" class="briefing-input-bar">
+          <textarea
+            v-model="input"
+            class="briefing-input"
+            placeholder="Reply to your briefing…"
+            rows="1"
+            @keydown="onKeydown"
+          ></textarea>
+          <button
+            class="btn-send"
+            @click="send"
+            :disabled="!input.trim() || chatStore.streaming || sending"
+            aria-label="Send"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- Right: News cards panel -->
+      <div class="briefing-right">
+        <div class="panel-label">Today's News</div>
+        <div v-if="!newsItems.length" class="panel-empty">No news items</div>
+        <div
+          v-for="item in newsItems"
+          :key="item.id"
+          class="news-card"
+        >
+          <div class="news-card-meta">
+            <span class="news-source">{{ item.source }}</span>
+            <span v-if="item.published_at" class="news-date">{{ formatRelativeDate(item.published_at) }}</span>
+          </div>
+          <a
+            v-if="item.url"
+            :href="item.url"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="news-title"
+          >{{ item.title }}</a>
+          <p v-else class="news-title news-title--plain">{{ item.title }}</p>
+          <p v-if="item.snippet" class="news-snippet">{{ item.snippet }}</p>
+          <div class="news-reactions">
+            <button
+              class="reaction-btn"
+              :class="{ active: reactions[item.id] === 'up' }"
+              @click="handleReaction(item.id, 'up')"
+              title="Interested"
+            >👍</button>
+            <button
+              class="reaction-btn"
+              :class="{ active: reactions[item.id] === 'down' }"
+              @click="handleReaction(item.id, 'down')"
+              title="Not interested"
+            >👎</button>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.briefing-root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.briefing-shell {
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr;
+  grid-template-rows: auto 1fr;
+  height: 100%;
+  min-height: 0;
+}
+
+/* ── Header ────────────────────────────────────────────────── */
+.briefing-header {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1rem 1rem;
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.briefing-header-left {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+}
+
+.briefing-title {
+  font-family: 'Fraunces', Georgia, serif;
+  font-size: 1.3rem;
+  font-weight: 700;
+  margin: 0;
+  color: var(--color-text);
+}
+
+.briefing-today-badge {
+  font-size: 0.82rem;
+  color: var(--color-text-muted);
+}
+
+.briefing-header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.briefing-conv-select {
+  padding: 0.35rem 0.6rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-bg-card);
+  color: var(--color-text);
+  font-size: 0.82rem;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.btn-trigger {
+  padding: 0.35rem 0.8rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-bg-card);
+  color: var(--color-text-muted);
+  font-size: 0.8rem;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s;
+  font-family: inherit;
+}
+.btn-trigger:hover:not(:disabled) {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+.btn-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ── Left: Weather ─────────────────────────────────────────── */
+.briefing-left {
+  grid-column: 1;
+  grid-row: 2;
+  border-right: 1px solid var(--color-border);
+  overflow-y: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* Override WeatherCard's own margin-bottom so gap handles spacing */
+.briefing-left :deep(.weather-card) {
+  margin-bottom: 0;
+}
+
+/* ── Center: Chat ──────────────────────────────────────────── */
+.briefing-center {
+  grid-column: 2;
+  grid-row: 2;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.briefing-messages-wrap {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+}
+
+.briefing-loading,
+.briefing-empty {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+}
+
+.briefing-empty-hint {
+  font-size: 0.8rem;
+  opacity: 0.7;
+  margin-top: 0.5rem;
+}
+
+.briefing-messages {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.briefing-input-bar {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-end;
+  padding: 0.75rem 1rem 1rem;
+  border-top: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.briefing-input {
+  flex: 1;
+  padding: 0.6rem 0.8rem;
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  background: var(--color-bg-card);
+  color: var(--color-text);
+  font-size: 0.9rem;
+  resize: none;
+  outline: none;
+  font-family: inherit;
+  line-height: 1.4;
+  max-height: 120px;
+  overflow-y: auto;
+  transition: border-color 0.15s;
+}
+.briefing-input:focus { border-color: var(--color-primary); }
+
+.btn-send {
+  padding: 0.55rem 0.75rem;
+  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.15s;
+  flex-shrink: 0;
+}
+.btn-send:disabled { opacity: 0.4; cursor: not-allowed; }
+.btn-send:hover:not(:disabled) { opacity: 0.9; }
+
+/* ── Right: News ───────────────────────────────────────────── */
+.briefing-right {
+  grid-column: 3;
+  grid-row: 2;
+  border-left: 1px solid var(--color-border);
+  overflow-y: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* ── Shared panel utilities ────────────────────────────────── */
+.panel-label {
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-primary);
+  flex-shrink: 0;
+  margin-bottom: 0.25rem;
+}
+
+.panel-empty {
+  font-size: 0.82rem;
+  color: var(--color-text-muted);
+}
+
+/* ── News cards ────────────────────────────────────────────── */
+.news-card {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  padding: 0.65rem 0.85rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+.news-card-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.news-source {
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-primary);
+}
+
+.news-date {
+  font-size: 0.72rem;
+  color: var(--color-text-muted);
+}
+
+.news-title {
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: var(--color-text);
+  line-height: 1.35;
+  text-decoration: none;
+  margin: 0;
+}
+a.news-title:hover { text-decoration: underline; color: var(--color-primary); }
+
+.news-snippet {
+  font-size: 0.78rem;
+  color: var(--color-text-muted);
+  line-height: 1.45;
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.news-reactions {
+  display: flex;
+  gap: 0.3rem;
+  margin-top: 0.15rem;
+}
+
+.reaction-btn {
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 0.1rem 0.35rem;
+  cursor: pointer;
+  font-size: 0.82rem;
+  line-height: 1.4;
+  opacity: 0.55;
+  transition: opacity 0.15s, border-color 0.15s;
+}
+.reaction-btn:hover {
+  opacity: 1;
+  border-color: var(--color-primary);
+}
+.reaction-btn.active {
+  opacity: 1;
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+}
+
+/* ── Responsive: collapse to single column on narrow screens ─ */
+@media (max-width: 900px) {
+  .briefing-shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto 1fr auto;
+    overflow-y: auto;
+  }
+  .briefing-header { grid-column: 1; grid-row: 1; }
+  .briefing-left {
+    grid-column: 1;
+    grid-row: 2;
+    border-right: none;
+    border-bottom: 1px solid var(--color-border);
+    max-height: 220px;
+  }
+  .briefing-center {
+    grid-column: 1;
+    grid-row: 3;
+  }
+  .briefing-right {
+    grid-column: 1;
+    grid-row: 4;
+    border-left: none;
+    border-top: 1px solid var(--color-border);
+    max-height: 300px;
+  }
+}
+</style>
+```
+
+- [ ] **Step 2: TypeScript check**
+
+```bash
+cd /home/bvandeusen/Nextcloud/Projects/fabledassistant/frontend
+npx tsc --noEmit 2>&1 | grep -v "SlashCommands\|TagSuggestion\|WikilinkSuggestion\|suggestionRenderer"
+```
+Expected: no new errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add frontend/src/views/BriefingView.vue
+git commit -m "feat: redesign briefing view as 3-column layout with weather left, news right"
+```
+
+---
+
+### Task 6: News archive view (`/news`)
+
+**Files:**
+- Create: `frontend/src/views/NewsView.vue`
+- Modify: `frontend/src/router/index.ts`
+- Modify: `frontend/src/components/AppHeader.vue`
+
+- [ ] **Step 1: Create `frontend/src/views/NewsView.vue`**
+
+```vue
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import {
+  getNewsItems,
+  getBriefingFeeds,
+  postRssReaction,
+  deleteRssReaction,
+  type BriefingFeed,
+} from '@/api/client'
+import type { NewsItem } from '@/types/news'
+
+const items = ref<NewsItem[]>([])
+const feeds = ref<BriefingFeed[]>([])
+const selectedFeedId = ref<number | null>(null)
+const loading = ref(false)
+const hasMore = ref(true)
+const offset = ref(0)
+const LIMIT = 40
+
+// Reactions map for optimistic updates
+const reactions = ref<Record<number, 'up' | 'down' | null>>({})
+
+async function loadMore() {
+  if (loading.value || !hasMore.value) return
+  loading.value = true
+  try {
+    const data = await getNewsItems(90, LIMIT, offset.value, selectedFeedId.value ?? undefined)
+    items.value = [...items.value, ...data.items]
+    for (const item of data.items) {
+      reactions.value[item.id] = item.reaction
+    }
+    offset.value += data.items.length
+    hasMore.value = data.items.length === LIMIT
+  } finally {
+    loading.value = false
+  }
+}
+
+function onFeedChange() {
+  items.value = []
+  offset.value = 0
+  hasMore.value = true
+  reactions.value = {}
+  loadMore()
+}
+
+async function handleReaction(itemId: number, reaction: 'up' | 'down') {
+  const current = reactions.value[itemId]
+  reactions.value[itemId] = current === reaction ? null : reaction
+  try {
+    if (current === reaction) {
+      await deleteRssReaction(itemId)
+    } else {
+      await postRssReaction(itemId, reaction)
+    }
+  } catch {
+    reactions.value[itemId] = current ?? null
+  }
+}
+
+function formatRelativeDate(iso: string | null): string {
+  if (!iso) return ''
+  const d = new Date(iso)
+  const now = new Date()
+  const diffH = (now.getTime() - d.getTime()) / 3_600_000
+  if (diffH < 1) return 'Just now'
+  if (diffH < 24) return `${Math.round(diffH)}h ago`
+  if (diffH < 48) return 'Yesterday'
+  if (diffH < 24 * 7) return `${Math.floor(diffH / 24)}d ago`
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+}
+
+onMounted(async () => {
+  feeds.value = await getBriefingFeeds().catch(() => [])
+  loadMore()
+})
+</script>
+
+<template>
+  <main class="news-page">
+    <div class="news-header">
+      <h1 class="news-title">News</h1>
+      <select
+        v-model="selectedFeedId"
+        class="feed-filter"
+        @change="onFeedChange"
+      >
+        <option :value="null">All feeds</option>
+        <option v-for="feed in feeds" :key="feed.id" :value="feed.id">
+          {{ feed.title || feed.url }}
+        </option>
+      </select>
+    </div>
+
+    <div v-if="items.length === 0 && !loading" class="news-empty">
+      No articles found. Make sure RSS feeds are configured and have been refreshed.
+    </div>
+
+    <div class="news-grid">
+      <div
+        v-for="item in items"
+        :key="item.id"
+        class="news-card"
+      >
+        <div class="news-card-meta">
+          <span class="news-source">{{ item.source }}</span>
+          <span v-if="item.published_at" class="news-date">{{ formatRelativeDate(item.published_at) }}</span>
+        </div>
+        <a
+          v-if="item.url"
+          :href="item.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="news-card-title"
+        >{{ item.title }}</a>
+        <p v-else class="news-card-title news-card-title--plain">{{ item.title }}</p>
+        <p v-if="item.snippet" class="news-snippet">{{ item.snippet }}</p>
+        <div class="news-reactions">
+          <button
+            class="reaction-btn"
+            :class="{ active: reactions[item.id] === 'up' }"
+            @click="handleReaction(item.id, 'up')"
+            title="Interested"
+          >👍</button>
+          <button
+            class="reaction-btn"
+            :class="{ active: reactions[item.id] === 'down' }"
+            @click="handleReaction(item.id, 'down')"
+            title="Not interested"
+          >👎</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="news-footer">
+      <button
+        v-if="hasMore"
+        class="btn-load-more"
+        @click="loadMore"
+        :disabled="loading"
+      >
+        {{ loading ? 'Loading…' : 'Load more' }}
+      </button>
+      <p v-else-if="items.length > 0" class="news-end">
+        All articles loaded ({{ items.length }} total)
+      </p>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.news-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1.5rem 1.5rem 3rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.news-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.news-title {
+  font-family: 'Fraunces', Georgia, serif;
+  font-size: 1.4rem;
+  font-weight: 700;
+  margin: 0;
+  color: var(--color-text);
+}
+
+.feed-filter {
+  padding: 0.35rem 0.65rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-bg-card);
+  color: var(--color-text);
+  font-size: 0.85rem;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.news-empty {
+  text-align: center;
+  padding: 4rem 1rem;
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+}
+
+.news-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 0.75rem;
+}
+
+.news-card {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  padding: 0.85rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.news-card-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.news-source {
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-primary);
+}
+
+.news-date {
+  font-size: 0.72rem;
+  color: var(--color-text-muted);
+}
+
+.news-card-title {
+  font-size: 0.92rem;
+  font-weight: 600;
+  color: var(--color-text);
+  line-height: 1.4;
+  text-decoration: none;
+  margin: 0;
+}
+a.news-card-title:hover {
+  text-decoration: underline;
+  color: var(--color-primary);
+}
+
+.news-snippet {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+  line-height: 1.45;
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.news-reactions {
+  display: flex;
+  gap: 0.3rem;
+  margin-top: 0.25rem;
+}
+
+.reaction-btn {
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 0.1rem 0.35rem;
+  cursor: pointer;
+  font-size: 0.82rem;
+  line-height: 1.4;
+  opacity: 0.55;
+  transition: opacity 0.15s, border-color 0.15s;
+}
+.reaction-btn:hover {
+  opacity: 1;
+  border-color: var(--color-primary);
+}
+.reaction-btn.active {
+  opacity: 1;
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+}
+
+.news-footer {
+  display: flex;
+  justify-content: center;
+  padding-top: 0.5rem;
+}
+
+.btn-load-more {
+  padding: 0.55rem 1.5rem;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  color: var(--color-text-secondary);
+  font-size: 0.85rem;
+  font-family: inherit;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+}
+.btn-load-more:hover:not(:disabled) {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+.btn-load-more:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.news-end {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+}
+
+@media (max-width: 600px) {
+  .news-grid { grid-template-columns: 1fr; }
+}
+</style>
+```
+
+- [ ] **Step 2: Add `/news` route to `frontend/src/router/index.ts`**
+
+Add after the `/briefing` route (around line 122):
+
+```typescript
+    {
+      path: '/news',
+      name: 'news',
+      component: () => import('@/views/NewsView.vue'),
+    },
+```
+
+- [ ] **Step 3: Add News nav link to `frontend/src/components/AppHeader.vue`**
+
+In the `.nav-center` div (around line 74), add after the Briefing link:
+
+```html
+<router-link to="/news" class="nav-link">News</router-link>
+```
+
+In the mobile menu div (around line 131), add after the Briefing link:
+
+```html
+<router-link to="/news" class="nav-link">News</router-link>
+```
+
+- [ ] **Step 4: TypeScript check**
+
+```bash
+cd /home/bvandeusen/Nextcloud/Projects/fabledassistant/frontend
+npx tsc --noEmit 2>&1 | grep -v "SlashCommands\|TagSuggestion\|WikilinkSuggestion\|suggestionRenderer"
+```
+Expected: no new errors
+
+- [ ] **Step 5: Run full backend test suite**
+
+```bash
+cd /home/bvandeusen/Nextcloud/Projects/fabledassistant
+source .venv/bin/activate
+pytest tests/ -v --tb=short 2>&1 | tail -20
+```
+Expected: all tests pass
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add frontend/src/views/NewsView.vue frontend/src/router/index.ts frontend/src/components/AppHeader.vue
+git commit -m "feat: add /news archive view with feed filter, pagination, and reactions"
+```