Compare commits
181 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 6e3de91a6f | |||
| 6e0c528126 | |||
| dd3b59ed36 | |||
| 56b687c9f4 | |||
| 6d57840dc7 | |||
| 7f37cee49f | |||
| 39e554d938 | |||
| b3cf42863a | |||
| d290bebad2 | |||
| 58e5c6bc60 | |||
| d3170e5545 | |||
| 814f44c3fb | |||
| 1d0cf4828b | |||
| 56f1c44b8e | |||
| a5e35f7c72 | |||
| 853dc810ff | |||
| ac7dde472f | |||
| 84926d4ba2 | |||
| 9b69e38aff | |||
| 1b68559bfe | |||
| edf0a9063e | |||
| f2c2117b25 | |||
| b9d0716b01 | |||
| 9af8ab8f70 | |||
| a171210224 | |||
| eb92b2a976 | |||
| be805073a7 | |||
| e4c812a603 | |||
| 8f7590d322 | |||
| 3bdadaeca8 | |||
| c8c0de3b04 | |||
| 1357046160 | |||
| 8ec91ceea7 | |||
| 0ec030cb8f | |||
| f4aca40562 | |||
| 68eee57c9b | |||
| 284dcd1c63 | |||
| 7dc5af2e88 | |||
| eeb671872a | |||
| 278927ec40 | |||
| f7d54a15c0 | |||
| 9dd4178774 | |||
| eed2f6c23a | |||
| db092b113e | |||
| b5106441dd | |||
| 94d21c4512 | |||
| d9bd16633f | |||
| c5191837fb | |||
| ed715dcc23 | |||
| 738245af5c | |||
| edfed6b5bb | |||
| 358534efbf | |||
| 7677ab4028 | |||
| 90afbec4c2 | |||
| 5495fd1500 | |||
| 1fc0004e93 | |||
| 968e536d3a | |||
| 3c38c04ad4 | |||
| 4ac26d9326 | |||
| 00abfcf4db | |||
| 3887cab66e | |||
| aeb778f35a | |||
| eda9c5ce43 | |||
| d624d38412 | |||
| 86e718dda1 | |||
| 0b1ed2afe5 | |||
| 2c446be83a | |||
| f36398f892 | |||
| 927f137aaf | |||
| 7eaf4d9dca | |||
| 89a9088b94 | |||
| c89586dcd5 | |||
| fb26507123 | |||
| 0a913045a8 | |||
| c81a499e6e | |||
| 8024706870 | |||
| 22003788f5 | |||
| 9d519054ee | |||
| b4f5a935b2 | |||
| fda6a7acc1 | |||
| 7ffd412603 | |||
| b92c6b1487 | |||
| b8cd2e5ed7 | |||
| ef55bcb560 | |||
| a6888953dc | |||
| c9065c4481 | |||
| 4792e6459b | |||
| 3bd0dc6879 | |||
| fa38978745 | |||
| 750a91898a | |||
| 888b736ecd | |||
| a473f6e039 | |||
| 07f4956550 | |||
| b4be1f0799 | |||
| 36634919cc | |||
| 8a10eb9dbd | |||
| 2422946b4f | |||
| b416fec292 | |||
| d20320b664 | |||
| c3665ddda5 | |||
| a7160772bf | |||
| 746b21fa4c | |||
| 8a54daf3c9 | |||
| 25d448f896 | |||
| 3e42992f67 | |||
| 749a60b9fd | |||
| aec7a910f0 | |||
| 9549eb85bc | |||
| 23a7ed7822 | |||
| d5771a3d5c | |||
| c95afa4558 | |||
| 8140bc022c | |||
| 0d12d01115 | |||
| d96895c276 | |||
| 145c18d8a3 | |||
| f96013a4bc | |||
| 30981a3121 | |||
| 71b8c5965c | |||
| 5924e565b1 | |||
| a0620c4949 | |||
| 95056d5be7 | |||
| 80f30b705d | |||
| 425d307180 | |||
| f2dd25737a | |||
| 882ea176b2 | |||
| baeb0b14e5 | |||
| ab397e78f3 | |||
| ea23f16bd7 | |||
| c1fcb1e287 | |||
| c31cf11767 | |||
| 71ca0ecb5c | |||
| b4b4b0d9d6 | |||
| 76c3dbc4b7 | |||
| 1460863e82 | |||
| 98b3cdb593 | |||
| c2d81e04b9 | |||
| e613485474 | |||
| 0b05b03987 | |||
| a773c11aa0 | |||
| dba41879ed | |||
| 9f3b9e45c6 | |||
| 2a8c0cfa56 | |||
| dd304bb556 | |||
| f146485df3 | |||
| eaf70500b8 | |||
| 6f84d90dff | |||
| 3581cc1582 | |||
| 3dd879640a | |||
| f8b7b51832 | |||
| 0cbeb6b7ac | |||
| 218f946e48 | |||
| 00643c778e | |||
| 20e2333b63 | |||
| 024075329d | |||
| 697d99cc4d | |||
| 164c55e845 | |||
| c77c13684f | |||
| 7b95150101 | |||
| 96a07690a8 | |||
| 6da4b098e3 | |||
| 7fdb2ee39d | |||
| 83cee46078 | |||
| 534e0a3a34 | |||
| 51d2fd9d0a | |||
| ac90548823 | |||
| 37e2420192 | |||
| f81c38df84 | |||
| 0a6e57e698 | |||
| 260103d533 | |||
| 35f57e0d3e | |||
| 57bf63e576 | |||
| aa18f4f527 | |||
| 3391825550 | |||
| 3d7c953627 | |||
| 6557fef6a2 | |||
| 0dc3dfa539 | |||
| 3179b60eac | |||
| a24257aeed | |||
| c271f1b41f | |||
| c92f4944cc | |||
| 1125c8e107 |
@@ -121,6 +121,14 @@ jobs:
|
||||
echo "value=$TAGS" >> $GITHUB_OUTPUT
|
||||
echo "build_version=$BUILD_VERSION" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Free disk space
|
||||
run: |
|
||||
# Remove all unused images (including old :SHA tags) and containers.
|
||||
docker system prune -af || true
|
||||
# Keep the local BuildKit cache bounded so pip mount cache survives
|
||||
# but stale intermediate layers don't accumulate indefinitely.
|
||||
docker builder prune --keep-storage 5g -f || true
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v4
|
||||
|
||||
@@ -136,5 +144,6 @@ jobs:
|
||||
with:
|
||||
context: .
|
||||
push: true
|
||||
provenance: false
|
||||
tags: ${{ steps.tags.outputs.value }}
|
||||
build-args: BUILD_VERSION=${{ steps.tags.outputs.build_version }}
|
||||
|
||||
@@ -23,6 +23,8 @@ settings.local.json
|
||||
# Claude Code
|
||||
.claude/
|
||||
docs/superpowers/
|
||||
docs/plans/
|
||||
docs/specs/
|
||||
|
||||
# Environment
|
||||
.env
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
2298268
|
||||
+12
-3
@@ -1,3 +1,4 @@
|
||||
# syntax=docker/dockerfile:1
|
||||
# Stage 1: Build Vue frontend
|
||||
FROM node:22-alpine AS build-frontend
|
||||
WORKDIR /build
|
||||
@@ -12,14 +13,22 @@ WORKDIR /app
|
||||
|
||||
COPY pyproject.toml .
|
||||
COPY src/ src/
|
||||
RUN pip install --no-cache-dir .
|
||||
RUN --mount=type=cache,target=/root/.cache/pip \
|
||||
pip install .
|
||||
# Voice dependencies (faster-whisper, Kokoro TTS, soundfile) — activated at runtime via VOICE_ENABLED
|
||||
# Install CPU-only torch first so pip doesn't pull full CUDA wheels (~2 GB) for kokoro/transformers.
|
||||
RUN --mount=type=cache,target=/root/.cache/pip \
|
||||
pip install torch --index-url https://download.pytorch.org/whl/cpu \
|
||||
&& pip install faster-whisper kokoro soundfile \
|
||||
&& python -m spacy download en_core_web_sm
|
||||
|
||||
# Build the fable-mcp wheel so it can be served for download
|
||||
COPY fable-mcp/ fable-mcp/
|
||||
RUN pip install --no-cache-dir build hatchling \
|
||||
RUN --mount=type=cache,target=/root/.cache/pip \
|
||||
pip install build hatchling \
|
||||
&& python -m build --wheel ./fable-mcp --outdir /app/dist/ \
|
||||
&& pip uninstall -y build \
|
||||
&& rm -rf fable-mcp/ /root/.cache/pip
|
||||
&& rm -rf fable-mcp/
|
||||
|
||||
COPY --from=build-frontend /build/dist/ src/fabledassistant/static/
|
||||
COPY alembic.ini .
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
"""Add 'cancelled' value to task_status enum."""
|
||||
"""Add 'cancelled' task status.
|
||||
|
||||
The status column is plain TEXT (not a PostgreSQL enum type), so no DDL
|
||||
change is required — the application layer already accepts the new value.
|
||||
"""
|
||||
|
||||
from alembic import op
|
||||
|
||||
@@ -9,10 +13,9 @@ depends_on = None
|
||||
|
||||
|
||||
def upgrade() -> None:
|
||||
op.execute("ALTER TYPE task_status ADD VALUE IF NOT EXISTS 'cancelled'")
|
||||
# No-op: status is stored as TEXT; the new value is valid without DDL changes.
|
||||
pass
|
||||
|
||||
|
||||
def downgrade() -> None:
|
||||
# PostgreSQL does not support removing enum values without a full type rebuild.
|
||||
# Downgrade is a no-op; the value simply becomes unused.
|
||||
pass
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
"""Add started_at and completed_at to notes."""
|
||||
|
||||
from alembic import op
|
||||
import sqlalchemy as sa
|
||||
|
||||
revision = "0032"
|
||||
down_revision = "0031"
|
||||
branch_labels = None
|
||||
depends_on = None
|
||||
|
||||
|
||||
def upgrade() -> None:
|
||||
op.add_column("notes", sa.Column("started_at", sa.DateTime(timezone=True), nullable=True))
|
||||
op.add_column("notes", sa.Column("completed_at", sa.DateTime(timezone=True), nullable=True))
|
||||
|
||||
|
||||
def downgrade() -> None:
|
||||
op.drop_column("notes", "completed_at")
|
||||
op.drop_column("notes", "started_at")
|
||||
@@ -0,0 +1,30 @@
|
||||
"""Add recurrence_rule and recurrence_next_spawn_at to notes."""
|
||||
|
||||
from alembic import op
|
||||
import sqlalchemy as sa
|
||||
from sqlalchemy.dialects.postgresql import JSONB
|
||||
|
||||
revision = "0033"
|
||||
down_revision = "0032"
|
||||
branch_labels = None
|
||||
depends_on = None
|
||||
|
||||
|
||||
def upgrade() -> None:
|
||||
op.add_column("notes", sa.Column("recurrence_rule", JSONB(), nullable=True))
|
||||
op.add_column(
|
||||
"notes",
|
||||
sa.Column("recurrence_next_spawn_at", sa.DateTime(timezone=True), nullable=True),
|
||||
)
|
||||
op.create_index(
|
||||
"ix_notes_recurrence_next_spawn_at",
|
||||
"notes",
|
||||
["recurrence_next_spawn_at"],
|
||||
postgresql_where=sa.text("recurrence_next_spawn_at IS NOT NULL"),
|
||||
)
|
||||
|
||||
|
||||
def downgrade() -> None:
|
||||
op.drop_index("ix_notes_recurrence_next_spawn_at", table_name="notes")
|
||||
op.drop_column("notes", "recurrence_next_spawn_at")
|
||||
op.drop_column("notes", "recurrence_rule")
|
||||
@@ -0,0 +1,53 @@
|
||||
"""Add user_profiles table for structured per-user preferences."""
|
||||
|
||||
import sqlalchemy as sa
|
||||
from alembic import op
|
||||
from sqlalchemy.dialects.postgresql import ARRAY, JSONB
|
||||
|
||||
revision = "0034"
|
||||
down_revision = "0033"
|
||||
branch_labels = None
|
||||
depends_on = None
|
||||
|
||||
|
||||
def upgrade() -> None:
|
||||
op.create_table(
|
||||
"user_profiles",
|
||||
sa.Column("id", sa.Integer(), primary_key=True),
|
||||
sa.Column(
|
||||
"user_id",
|
||||
sa.Integer(),
|
||||
sa.ForeignKey("users.id", ondelete="CASCADE"),
|
||||
nullable=False,
|
||||
unique=True,
|
||||
),
|
||||
sa.Column("display_name", sa.Text(), nullable=True),
|
||||
sa.Column("job_title", sa.Text(), nullable=True),
|
||||
sa.Column("industry", sa.Text(), nullable=True),
|
||||
sa.Column("expertise_level", sa.Text(), nullable=True),
|
||||
sa.Column("response_style", sa.Text(), nullable=True),
|
||||
sa.Column("tone", sa.Text(), nullable=True),
|
||||
sa.Column("interests", ARRAY(sa.Text()), nullable=True),
|
||||
sa.Column("work_schedule", JSONB(), nullable=True),
|
||||
sa.Column("learned_summary", sa.Text(), nullable=True),
|
||||
sa.Column("observations_raw", JSONB(), nullable=True),
|
||||
sa.Column("observations_updated_at", sa.DateTime(timezone=True), nullable=True),
|
||||
sa.Column(
|
||||
"created_at",
|
||||
sa.DateTime(timezone=True),
|
||||
server_default=sa.func.now(),
|
||||
nullable=False,
|
||||
),
|
||||
sa.Column(
|
||||
"updated_at",
|
||||
sa.DateTime(timezone=True),
|
||||
server_default=sa.func.now(),
|
||||
nullable=False,
|
||||
),
|
||||
)
|
||||
op.create_index("ix_user_profiles_user_id", "user_profiles", ["user_id"], unique=True)
|
||||
|
||||
|
||||
def downgrade() -> None:
|
||||
op.drop_index("ix_user_profiles_user_id", table_name="user_profiles")
|
||||
op.drop_table("user_profiles")
|
||||
@@ -0,0 +1,28 @@
|
||||
"""Add rss_item_embeddings table for semantic news search."""
|
||||
|
||||
import sqlalchemy as sa
|
||||
from alembic import op
|
||||
from sqlalchemy.dialects.postgresql import JSONB
|
||||
|
||||
revision = "0035"
|
||||
down_revision = "0034"
|
||||
branch_labels = None
|
||||
depends_on = None
|
||||
|
||||
|
||||
def upgrade() -> None:
|
||||
op.create_table(
|
||||
"rss_item_embeddings",
|
||||
sa.Column("rss_item_id", sa.Integer(), sa.ForeignKey("rss_items.id", ondelete="CASCADE"), primary_key=True),
|
||||
sa.Column("user_id", sa.Integer(), nullable=False),
|
||||
sa.Column("embedding", JSONB(), nullable=False),
|
||||
sa.Column("updated_at", sa.DateTime(timezone=True), nullable=False, server_default=sa.func.now()),
|
||||
)
|
||||
op.create_index("ix_rss_item_embeddings_user_id", "rss_item_embeddings", ["user_id"])
|
||||
op.create_index("ix_rss_item_embeddings_rss_item_id", "rss_item_embeddings", ["rss_item_id"])
|
||||
|
||||
|
||||
def downgrade() -> None:
|
||||
op.drop_index("ix_rss_item_embeddings_rss_item_id", table_name="rss_item_embeddings")
|
||||
op.drop_index("ix_rss_item_embeddings_user_id", table_name="rss_item_embeddings")
|
||||
op.drop_table("rss_item_embeddings")
|
||||
@@ -0,0 +1,28 @@
|
||||
"""Add note_type and metadata columns to notes table for entity types."""
|
||||
|
||||
import sqlalchemy as sa
|
||||
from alembic import op
|
||||
from sqlalchemy.dialects.postgresql import JSONB
|
||||
|
||||
revision = "0036"
|
||||
down_revision = "0035"
|
||||
branch_labels = None
|
||||
depends_on = None
|
||||
|
||||
|
||||
def upgrade() -> None:
|
||||
op.add_column(
|
||||
"notes",
|
||||
sa.Column("note_type", sa.Text(), nullable=False, server_default="note"),
|
||||
)
|
||||
op.add_column(
|
||||
"notes",
|
||||
sa.Column("metadata", JSONB(), nullable=True),
|
||||
)
|
||||
op.create_index("ix_notes_note_type", "notes", ["note_type"])
|
||||
|
||||
|
||||
def downgrade() -> None:
|
||||
op.drop_index("ix_notes_note_type", table_name="notes")
|
||||
op.drop_column("notes", "metadata")
|
||||
op.drop_column("notes", "note_type")
|
||||
@@ -0,0 +1,29 @@
|
||||
"""Add reminder_minutes and reminder_sent_at to events.
|
||||
|
||||
Revision ID: 0037
|
||||
Revises: 0036
|
||||
Create Date: 2026-04-04
|
||||
"""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
import sqlalchemy as sa
|
||||
from alembic import op
|
||||
|
||||
revision = "0037"
|
||||
down_revision = "0036"
|
||||
branch_labels = None
|
||||
depends_on = None
|
||||
|
||||
|
||||
def upgrade() -> None:
|
||||
op.add_column("events", sa.Column("reminder_minutes", sa.Integer(), nullable=True))
|
||||
op.add_column(
|
||||
"events",
|
||||
sa.Column("reminder_sent_at", sa.DateTime(timezone=True), nullable=True),
|
||||
)
|
||||
|
||||
|
||||
def downgrade() -> None:
|
||||
op.drop_column("events", "reminder_sent_at")
|
||||
op.drop_column("events", "reminder_minutes")
|
||||
+1
-1
@@ -15,7 +15,7 @@ services:
|
||||
environment:
|
||||
DATABASE_URL: "postgresql+asyncpg://${POSTGRES_USER:-fabled}:${POSTGRES_PASSWORD:-fabled}@db:5432/${POSTGRES_DB:-fabledassistant}"
|
||||
OLLAMA_URL: "http://ollama:11434"
|
||||
OLLAMA_MODEL: "${OLLAMA_MODEL:-llama3.1}"
|
||||
OLLAMA_MODEL: "${OLLAMA_MODEL:-qwen3:8B}"
|
||||
SECRET_KEY: "${SECRET_KEY:-dev-secret-change-me}"
|
||||
# Uncomment and set to enable web research and image search via SearXNG:
|
||||
# SEARXNG_URL: "http://searxng:8080"
|
||||
|
||||
@@ -0,0 +1,200 @@
|
||||
# Speech-to-Speech (S2S) Design Spec
|
||||
|
||||
**Branch:** `feature/voice-s2s`
|
||||
**Date:** 2026-03-29
|
||||
**Status:** Approved for implementation
|
||||
|
||||
---
|
||||
|
||||
## Decisions
|
||||
|
||||
- **STT:** faster-whisper (in-process Python, model size configurable via `STT_MODEL` env var)
|
||||
- **TTS:** Kokoro TTS (in-process Python, voice/speed/style configurable per-user)
|
||||
- **Input mode:** Push-to-talk (Phase 1); VAD deferred
|
||||
- **No browser STT/TTS fallbacks** — self-hosted only, data stays on-server
|
||||
- **No Android app** — web only for this implementation
|
||||
|
||||
---
|
||||
|
||||
## New Env Vars (`config.py`)
|
||||
|
||||
| Var | Default | Description |
|
||||
|---|---|---|
|
||||
| `VOICE_ENABLED` | `false` | Feature flag — opt-in |
|
||||
| `STT_BACKEND` | `faster-whisper` | Only supported value currently |
|
||||
| `STT_MODEL` | `base.en` | `tiny.en` / `base.en` / `small.en` / `medium.en` |
|
||||
| `TTS_BACKEND` | `kokoro` | Only supported value currently |
|
||||
|
||||
---
|
||||
|
||||
## Per-User Settings (stored in `settings` table)
|
||||
|
||||
| Key | Default | Description |
|
||||
|---|---|---|
|
||||
| `voice_tts_voice` | `af_heart` | Kokoro voice ID |
|
||||
| `voice_tts_speed` | `1.0` | Speech rate, 0.7–1.3 |
|
||||
| `voice_speech_style` | `conversational` | `conversational` / `concise` / `detailed` |
|
||||
|
||||
---
|
||||
|
||||
## New Backend Files
|
||||
|
||||
### `src/fabledassistant/services/stt.py`
|
||||
Lazy singleton `WhisperModel` loader. Public API:
|
||||
- `load_stt_model()` — called at startup via `asyncio.create_task`
|
||||
- `transcribe(audio_bytes, mime_type) -> str` — runs in `run_in_executor`; writes bytes to `NamedTemporaryFile`, returns concatenated segment text
|
||||
- `stt_available() -> bool`
|
||||
|
||||
### `src/fabledassistant/services/tts.py`
|
||||
Lazy singleton `KPipeline` loader. Public API:
|
||||
- `load_tts_model()` — called at startup
|
||||
- `synthesise(text, voice, speed) -> bytes` — runs in `run_in_executor`; returns WAV bytes (24kHz, 16-bit mono)
|
||||
- `list_voices() -> list[dict]` — returns static list of known Kokoro voice IDs + labels
|
||||
- `tts_available() -> bool`
|
||||
|
||||
### `src/fabledassistant/routes/voice.py`
|
||||
Blueprint at `/api/voice`, all routes `@login_required`.
|
||||
|
||||
| Endpoint | Method | Description |
|
||||
|---|---|---|
|
||||
| `/api/voice/status` | GET | STT/TTS availability; `enabled` false if `VOICE_ENABLED=false` |
|
||||
| `/api/voice/voices` | GET | List available Kokoro voices |
|
||||
| `/api/voice/transcribe` | POST | multipart `audio` field → `{"transcript": "...", "duration_ms": 123}` |
|
||||
| `/api/voice/synthesise` | POST | `{"text", "voice", "speed"}` → WAV bytes |
|
||||
|
||||
---
|
||||
|
||||
## Modified Backend Files
|
||||
|
||||
### `src/fabledassistant/app.py`
|
||||
- Register `voice_bp` blueprint
|
||||
- In `startup()`: `asyncio.create_task(load_stt_model())` + `asyncio.create_task(load_tts_model())` when `VOICE_ENABLED`
|
||||
|
||||
### `src/fabledassistant/config.py`
|
||||
- Add 4 new env var attributes
|
||||
- Add validation in `validate()`
|
||||
|
||||
### `src/fabledassistant/services/llm.py`
|
||||
- Add `voice_mode: bool = False` and `voice_speech_style: str = "conversational"` to `build_context()`
|
||||
- When `voice_mode=True`, prepend: *"Respond naturally as if speaking aloud. No markdown, bullet points, headers, or code blocks. Complete sentences only."*
|
||||
- Append style modifier based on `voice_speech_style`
|
||||
|
||||
### `src/fabledassistant/services/generation_task.py`
|
||||
- Add `voice_mode: bool = False` to `run_generation()`
|
||||
- Read `voice_speech_style` from settings when voice_mode; pass both to `build_context()`
|
||||
|
||||
### `src/fabledassistant/routes/chat.py`
|
||||
- Allow `"voice"` in `conversation_type` whitelist
|
||||
|
||||
### `src/fabledassistant/services/chat.py`
|
||||
- Exclude `conversation_type == "voice"` from auto-cleanup retention
|
||||
|
||||
---
|
||||
|
||||
## New Frontend Files
|
||||
|
||||
### `frontend/src/composables/useVoiceRecorder.ts`
|
||||
Wraps `MediaRecorder`. Exports: `recording`, `error`, `isSupported`, `startRecording()`, `stopRecording() -> Promise<Blob>`.
|
||||
|
||||
### `frontend/src/composables/useVoiceAudio.ts`
|
||||
Wraps `AudioContext`. Exports: `playing`, `isSupported`, `play(blob)`, `stop()`.
|
||||
|
||||
### `frontend/src/components/VoiceOverlay.vue`
|
||||
Floating PTT button (fixed bottom-right). Creates/reuses a `"voice"` conversation. Full flow: record → transcribe → send → stream → synthesise → play. Space bar hotkey (from `App.vue`). Mounted globally in `App.vue`.
|
||||
|
||||
---
|
||||
|
||||
## Modified Frontend Files
|
||||
|
||||
### `frontend/src/api/client.ts`
|
||||
Add: `transcribeAudio(blob)`, `synthesiseSpeech(text, voice?, speed?)`, `getVoiceStatus()`, `getVoiceList()`
|
||||
|
||||
### `frontend/src/views/BriefingView.vue`
|
||||
- "Listen" button: reads latest assistant message aloud via TTS
|
||||
- Mic button in input bar: PTT → transcribe → auto-fill input → send
|
||||
- Auto-TTS on assistant response when in listen mode
|
||||
|
||||
### `frontend/src/views/SettingsView.vue`
|
||||
- New "Voice" tab: voice dropdown, speed slider, speech style radio
|
||||
- Loads from `/api/settings`, saves via `PUT /api/settings`
|
||||
|
||||
### `frontend/src/App.vue`
|
||||
- Mount `<VoiceOverlay />`
|
||||
- Space bar → `"voice:ptt-toggle"` custom event
|
||||
|
||||
---
|
||||
|
||||
## Audio Format
|
||||
|
||||
| Direction | Format | Rationale |
|
||||
|---|---|---|
|
||||
| Browser → Server | WebM/Opus | Native `MediaRecorder` output; no re-encoding |
|
||||
| Server → Browser | WAV (24kHz, 16-bit mono) | Kokoro native; no re-encoding; `decodeAudioData` compatible |
|
||||
|
||||
---
|
||||
|
||||
## Dependencies to Add (`pyproject.toml`)
|
||||
|
||||
```toml
|
||||
[project.optional-dependencies]
|
||||
voice = [
|
||||
"faster-whisper>=1.0",
|
||||
"kokoro>=0.9",
|
||||
"soundfile>=0.12",
|
||||
]
|
||||
```
|
||||
|
||||
Install unconditionally in Docker (activated by `VOICE_ENABLED` at runtime):
|
||||
```dockerfile
|
||||
RUN pip install faster-whisper kokoro soundfile
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Database Migration
|
||||
|
||||
No schema changes required. `conversation_type` is unconstrained TEXT. Voice settings use existing key-value `settings` table. Optional no-op migration `0034_voice_conversation_type.py` for audit trail.
|
||||
|
||||
---
|
||||
|
||||
## Implementation Phases
|
||||
|
||||
### Phase 1 — Backend services + routes
|
||||
1. Add env vars to `config.py`
|
||||
2. Create `services/stt.py` (faster-whisper)
|
||||
3. Create `services/tts.py` (Kokoro)
|
||||
4. Create `routes/voice.py` (4 endpoints)
|
||||
5. Wire model loading into `app.py` startup
|
||||
6. Add `voice_mode` to `build_context()` + `run_generation()`
|
||||
7. Allow `"voice"` conversation type in chat route + cleanup exclusion
|
||||
|
||||
### Phase 2 — BriefingView listen + voice follow-up
|
||||
1. Create `useVoiceRecorder.ts`
|
||||
2. Create `useVoiceAudio.ts`
|
||||
3. Add voice API functions to `client.ts`
|
||||
4. Add "Listen" button + mic button to `BriefingView.vue`
|
||||
|
||||
### Phase 3 — VoiceOverlay for general voice chat
|
||||
1. Create `VoiceOverlay.vue`
|
||||
2. Mount in `App.vue` + Space bar hotkey
|
||||
|
||||
### Phase 4 — Settings UI
|
||||
1. Add "Voice" tab to `SettingsView.vue`
|
||||
|
||||
---
|
||||
|
||||
## Kokoro Voice Reference
|
||||
|
||||
| ID | Character |
|
||||
|---|---|
|
||||
| `af_heart` | American female, warm (recommended default) |
|
||||
| `af_bella` | American female, expressive |
|
||||
| `af_nicole` | American female, breathy/intimate |
|
||||
| `af_sarah` | American female, clear |
|
||||
| `af_sky` | American female, bright |
|
||||
| `am_adam` | American male, neutral |
|
||||
| `am_michael` | American male, deeper |
|
||||
| `bf_emma` | British female |
|
||||
| `bf_isabella` | British female, formal |
|
||||
| `bm_george` | British male |
|
||||
| `bm_lewis` | British male, casual |
|
||||
@@ -1,538 +0,0 @@
|
||||
# Backup Service Rewrite Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Rewrite `services/backup.py` so that full and user backup/restore correctly includes every model added since the original implementation (projects, milestones, task logs, drafts, versions), with correct FK re-mapping on restore.
|
||||
|
||||
**Architecture:** Bump backup JSON format to version 2. Export is additive — all new tables exported. Restore builds an ID map for each table and patches FK references in the correct dependency order. V1 backups continue to restore via the existing code path.
|
||||
|
||||
**Tech Stack:** Python/SQLAlchemy 2.0 async, no new dependencies.
|
||||
|
||||
**Spec:** `docs/superpowers/specs/2026-03-11-backup-rewrite-design.md`
|
||||
|
||||
**Dependency note:** This plan can be split into Part A (pre-sharing models) and Part B (sharing models). Part A is independent and should be done first.
|
||||
|
||||
---
|
||||
|
||||
## Task 1: Extend export — full backup
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/fabledassistant/services/backup.py`
|
||||
|
||||
- [ ] **Step 1: Read the current `export_full_backup()` function**
|
||||
|
||||
Understand what is currently exported: users, notes (partial fields), conversations+messages, settings.
|
||||
|
||||
- [ ] **Step 2: Rewrite `export_full_backup()` to version 2**
|
||||
|
||||
Add all missing models to the import list at the top of `backup.py`:
|
||||
```python
|
||||
from fabledassistant.models.project import Project
|
||||
from fabledassistant.models.milestone import Milestone
|
||||
from fabledassistant.models.task_log import TaskLog
|
||||
from fabledassistant.models.note_draft import NoteDraft
|
||||
from fabledassistant.models.note_version import NoteVersion
|
||||
from fabledassistant.models.push_subscription import PushSubscription
|
||||
```
|
||||
|
||||
Rewrite `export_full_backup()`:
|
||||
```python
|
||||
async def export_full_backup() -> dict:
|
||||
async with async_session() as session:
|
||||
users = (await session.execute(select(User))).scalars().all()
|
||||
projects = (await session.execute(select(Project))).scalars().all()
|
||||
milestones = (await session.execute(select(Milestone))).scalars().all()
|
||||
notes = (await session.execute(select(Note))).scalars().all()
|
||||
task_logs = (await session.execute(select(TaskLog))).scalars().all()
|
||||
note_drafts = (await session.execute(select(NoteDraft))).scalars().all()
|
||||
note_versions = (await session.execute(select(NoteVersion).order_by(NoteVersion.note_id, NoteVersion.version_number))).scalars().all()
|
||||
conversations = (await session.execute(
|
||||
select(Conversation).options(selectinload(Conversation.messages))
|
||||
)).scalars().all()
|
||||
settings = (await session.execute(select(Setting))).scalars().all()
|
||||
push_subs = (await session.execute(select(PushSubscription))).scalars().all()
|
||||
|
||||
return {
|
||||
"version": 2,
|
||||
"scope": "full",
|
||||
"exported_at": datetime.now(timezone.utc).isoformat(),
|
||||
"_security_notice": (
|
||||
"This backup contains hashed passwords and push subscription keys. "
|
||||
"Store it securely and restrict access."
|
||||
),
|
||||
"users": [
|
||||
{
|
||||
"id": u.id,
|
||||
"username": u.username,
|
||||
"email": u.email,
|
||||
"password_hash": u.password_hash,
|
||||
"oauth_sub": u.oauth_sub,
|
||||
"role": u.role,
|
||||
"session_version": u.session_version,
|
||||
"created_at": u.created_at.isoformat(),
|
||||
}
|
||||
for u in users
|
||||
],
|
||||
"projects": [
|
||||
{
|
||||
"id": p.id,
|
||||
"user_id": p.user_id,
|
||||
"title": p.title,
|
||||
"description": p.description,
|
||||
"goal": p.goal,
|
||||
"status": p.status,
|
||||
"color": p.color,
|
||||
"created_at": p.created_at.isoformat(),
|
||||
"updated_at": p.updated_at.isoformat(),
|
||||
}
|
||||
for p in projects
|
||||
],
|
||||
"milestones": [
|
||||
{
|
||||
"id": m.id,
|
||||
"user_id": m.user_id,
|
||||
"project_id": m.project_id,
|
||||
"title": m.title,
|
||||
"description": m.description,
|
||||
"status": m.status,
|
||||
"order_index": m.order_index,
|
||||
"created_at": m.created_at.isoformat(),
|
||||
"updated_at": m.updated_at.isoformat(),
|
||||
}
|
||||
for m in milestones
|
||||
],
|
||||
"notes": [
|
||||
{
|
||||
"id": n.id,
|
||||
"user_id": n.user_id,
|
||||
"title": n.title,
|
||||
"body": n.body,
|
||||
"tags": n.tags or [],
|
||||
"parent_id": n.parent_id,
|
||||
"project_id": n.project_id,
|
||||
"milestone_id": n.milestone_id,
|
||||
"is_task": n.is_task,
|
||||
"status": n.status,
|
||||
"priority": n.priority,
|
||||
"due_date": n.due_date.isoformat() if n.due_date else None,
|
||||
"is_starred": getattr(n, "is_starred", False),
|
||||
"is_pinned": getattr(n, "is_pinned", False),
|
||||
"created_at": n.created_at.isoformat(),
|
||||
"updated_at": n.updated_at.isoformat(),
|
||||
}
|
||||
for n in notes
|
||||
],
|
||||
"task_logs": [
|
||||
{
|
||||
"id": tl.id,
|
||||
"user_id": tl.user_id,
|
||||
"note_id": tl.note_id,
|
||||
"description": tl.description,
|
||||
"duration_minutes": tl.duration_minutes,
|
||||
"logged_at": tl.logged_at.isoformat() if tl.logged_at else None,
|
||||
"created_at": tl.created_at.isoformat(),
|
||||
}
|
||||
for tl in task_logs
|
||||
],
|
||||
"note_drafts": [
|
||||
{
|
||||
"id": nd.id,
|
||||
"user_id": nd.user_id,
|
||||
"note_id": nd.note_id,
|
||||
"title": nd.title,
|
||||
"body": nd.body,
|
||||
"saved_at": nd.saved_at.isoformat() if nd.saved_at else None,
|
||||
}
|
||||
for nd in note_drafts
|
||||
],
|
||||
"note_versions": [
|
||||
{
|
||||
"id": nv.id,
|
||||
"user_id": nv.user_id,
|
||||
"note_id": nv.note_id,
|
||||
"title": nv.title,
|
||||
"body": nv.body,
|
||||
"version_number": nv.version_number,
|
||||
"created_at": nv.created_at.isoformat(),
|
||||
}
|
||||
for nv in note_versions
|
||||
],
|
||||
"conversations": [
|
||||
{
|
||||
"id": c.id,
|
||||
"user_id": c.user_id,
|
||||
"title": c.title,
|
||||
"created_at": c.created_at.isoformat(),
|
||||
"updated_at": c.updated_at.isoformat(),
|
||||
"messages": [
|
||||
{
|
||||
"id": m.id,
|
||||
"role": m.role,
|
||||
"content": m.content,
|
||||
"context_note_id": m.context_note_id,
|
||||
"created_at": m.created_at.isoformat(),
|
||||
}
|
||||
for m in c.messages
|
||||
],
|
||||
}
|
||||
for c in conversations
|
||||
],
|
||||
"settings": [
|
||||
{"user_id": s.user_id, "key": s.key, "value": s.value}
|
||||
for s in settings
|
||||
],
|
||||
"push_subscriptions": [
|
||||
{
|
||||
"user_id": ps.user_id,
|
||||
"endpoint": ps.endpoint,
|
||||
"p256dh": ps.p256dh,
|
||||
"auth": ps.auth,
|
||||
"created_at": ps.created_at.isoformat(),
|
||||
}
|
||||
for ps in push_subs
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
Check what exact field names exist on each model before assuming. Use `getattr(obj, "field", default)` for fields that may not exist on older DB versions.
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/fabledassistant/services/backup.py
|
||||
git commit -m "feat(backup): v2 full export with projects, milestones, task_logs, drafts, versions"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 2: Extend export — user backup
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/fabledassistant/services/backup.py`
|
||||
|
||||
- [ ] **Step 1: Rewrite `export_user_backup(user_id)`**
|
||||
|
||||
Same structure as full backup but filtered to `WHERE user_id = uid`. Apply same field additions. Omit sensitive fields (password_hash, oauth_sub) from user self-export.
|
||||
|
||||
```python
|
||||
async def export_user_backup(user_id: int) -> dict:
|
||||
async with async_session() as session:
|
||||
user = await session.get(User, user_id)
|
||||
projects = (await session.execute(select(Project).where(Project.user_id == user_id))).scalars().all()
|
||||
milestones = (await session.execute(select(Milestone).where(Milestone.user_id == user_id))).scalars().all()
|
||||
notes = (await session.execute(select(Note).where(Note.user_id == user_id))).scalars().all()
|
||||
task_logs = (await session.execute(select(TaskLog).where(TaskLog.user_id == user_id))).scalars().all()
|
||||
note_drafts = (await session.execute(select(NoteDraft).where(NoteDraft.user_id == user_id))).scalars().all()
|
||||
note_versions = (await session.execute(
|
||||
select(NoteVersion).where(NoteVersion.user_id == user_id)
|
||||
.order_by(NoteVersion.note_id, NoteVersion.version_number)
|
||||
)).scalars().all()
|
||||
conversations = (await session.execute(
|
||||
select(Conversation).options(selectinload(Conversation.messages))
|
||||
.where(Conversation.user_id == user_id)
|
||||
)).scalars().all()
|
||||
settings = (await session.execute(select(Setting).where(Setting.user_id == user_id))).scalars().all()
|
||||
|
||||
return {
|
||||
"version": 2,
|
||||
"scope": "user",
|
||||
"exported_at": datetime.now(timezone.utc).isoformat(),
|
||||
"user": {
|
||||
"id": user.id,
|
||||
"username": user.username,
|
||||
"email": user.email,
|
||||
"role": user.role,
|
||||
"created_at": user.created_at.isoformat(),
|
||||
} if user else None,
|
||||
"projects": [...], # same as full but user-filtered
|
||||
"milestones": [...],
|
||||
"notes": [...],
|
||||
"task_logs": [...],
|
||||
"note_drafts": [...],
|
||||
"note_versions": [...],
|
||||
"conversations": [...],
|
||||
"settings": [...],
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add src/fabledassistant/services/backup.py
|
||||
git commit -m "feat(backup): v2 user backup with all models"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 3: Rewrite restore for v2
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/fabledassistant/services/backup.py`
|
||||
|
||||
- [ ] **Step 1: Add version dispatch to `restore_full_backup`**
|
||||
|
||||
```python
|
||||
async def restore_full_backup(data: dict) -> dict:
|
||||
version = data.get("version", 1)
|
||||
if version == 1:
|
||||
return await _restore_v1(data)
|
||||
return await _restore_v2(data)
|
||||
```
|
||||
|
||||
Move existing restore code into `_restore_v1(data)` with no changes.
|
||||
|
||||
- [ ] **Step 2: Implement `_restore_v2(data)` with full FK re-mapping**
|
||||
|
||||
Restore order (respects FK dependencies):
|
||||
1. Users → build `user_id_map`
|
||||
2. Projects (fk: user_id) → build `project_id_map`
|
||||
3. Milestones (fk: user_id, project_id) → build `milestone_id_map`
|
||||
4. Notes — first pass: insert without `parent_id` (fk: user_id, project_id, milestone_id) → build `note_id_map`
|
||||
5. Notes — second pass: patch `parent_id` using `note_id_map`
|
||||
6. TaskLogs (fk: user_id, note_id via note_id_map)
|
||||
7. NoteDrafts (fk: user_id, note_id via note_id_map)
|
||||
8. NoteVersions (fk: user_id, note_id via note_id_map) — export only, no restore by default (skip unless flag set)
|
||||
9. Conversations (fk: user_id) → Messages (fk: conversation_id, context_note_id via note_id_map)
|
||||
10. Settings (fk: user_id)
|
||||
|
||||
```python
|
||||
async def _restore_v2(data: dict) -> dict:
|
||||
from datetime import date, datetime, timezone
|
||||
|
||||
stats = {
|
||||
"users": 0, "projects": 0, "milestones": 0, "notes": 0,
|
||||
"task_logs": 0, "note_drafts": 0, "conversations": 0,
|
||||
"messages": 0, "settings": 0
|
||||
}
|
||||
|
||||
async with async_session() as session:
|
||||
user_id_map: dict[int, int] = {}
|
||||
project_id_map: dict[int, int] = {}
|
||||
milestone_id_map: dict[int, int] = {}
|
||||
note_id_map: dict[int, int] = {}
|
||||
|
||||
# 1. Users
|
||||
for u_data in data.get("users", []):
|
||||
old_id = u_data["id"]
|
||||
user = User(
|
||||
username=u_data["username"],
|
||||
email=u_data.get("email"),
|
||||
password_hash=u_data.get("password_hash"),
|
||||
oauth_sub=u_data.get("oauth_sub"),
|
||||
role=u_data.get("role", "user"),
|
||||
session_version=u_data.get("session_version", 1),
|
||||
created_at=datetime.fromisoformat(u_data["created_at"]) if u_data.get("created_at") else datetime.now(timezone.utc),
|
||||
)
|
||||
session.add(user)
|
||||
await session.flush()
|
||||
user_id_map[old_id] = user.id
|
||||
stats["users"] += 1
|
||||
|
||||
# 2. Projects
|
||||
for p_data in data.get("projects", []):
|
||||
mapped_uid = user_id_map.get(p_data.get("user_id", 0))
|
||||
if mapped_uid is None:
|
||||
continue
|
||||
proj = Project(
|
||||
user_id=mapped_uid,
|
||||
title=p_data.get("title", ""),
|
||||
description=p_data.get("description"),
|
||||
goal=p_data.get("goal"),
|
||||
status=p_data.get("status", "active"),
|
||||
color=p_data.get("color"),
|
||||
created_at=datetime.fromisoformat(p_data["created_at"]) if p_data.get("created_at") else datetime.now(timezone.utc),
|
||||
updated_at=datetime.fromisoformat(p_data["updated_at"]) if p_data.get("updated_at") else datetime.now(timezone.utc),
|
||||
)
|
||||
session.add(proj)
|
||||
await session.flush()
|
||||
project_id_map[p_data["id"]] = proj.id
|
||||
stats["projects"] += 1
|
||||
|
||||
# 3. Milestones
|
||||
for m_data in data.get("milestones", []):
|
||||
mapped_uid = user_id_map.get(m_data.get("user_id", 0))
|
||||
mapped_pid = project_id_map.get(m_data.get("project_id", 0))
|
||||
if mapped_uid is None:
|
||||
continue
|
||||
ms = Milestone(
|
||||
user_id=mapped_uid,
|
||||
project_id=mapped_pid,
|
||||
title=m_data.get("title", ""),
|
||||
description=m_data.get("description"),
|
||||
status=m_data.get("status", "open"),
|
||||
order_index=m_data.get("order_index", 0),
|
||||
created_at=datetime.fromisoformat(m_data["created_at"]) if m_data.get("created_at") else datetime.now(timezone.utc),
|
||||
updated_at=datetime.fromisoformat(m_data["updated_at"]) if m_data.get("updated_at") else datetime.now(timezone.utc),
|
||||
)
|
||||
session.add(ms)
|
||||
await session.flush()
|
||||
milestone_id_map[m_data["id"]] = ms.id
|
||||
stats["milestones"] += 1
|
||||
|
||||
# 4. Notes — first pass (no parent_id)
|
||||
note_objects: list[tuple[int, int]] = [] # (old_parent_id, new_note_id)
|
||||
for n_data in data.get("notes", []):
|
||||
mapped_uid = user_id_map.get(n_data.get("user_id", 0))
|
||||
if mapped_uid is None:
|
||||
continue
|
||||
due = None
|
||||
if n_data.get("due_date"):
|
||||
due = date.fromisoformat(n_data["due_date"])
|
||||
note = Note(
|
||||
user_id=mapped_uid,
|
||||
title=n_data.get("title", ""),
|
||||
body=n_data.get("body", ""),
|
||||
tags=n_data.get("tags", []),
|
||||
parent_id=None, # patched in second pass
|
||||
project_id=project_id_map.get(n_data.get("project_id")) if n_data.get("project_id") else None,
|
||||
milestone_id=milestone_id_map.get(n_data.get("milestone_id")) if n_data.get("milestone_id") else None,
|
||||
is_task=n_data.get("is_task", False),
|
||||
status=n_data.get("status"),
|
||||
priority=n_data.get("priority"),
|
||||
due_date=due,
|
||||
created_at=datetime.fromisoformat(n_data["created_at"]) if n_data.get("created_at") else datetime.now(timezone.utc),
|
||||
updated_at=datetime.fromisoformat(n_data["updated_at"]) if n_data.get("updated_at") else datetime.now(timezone.utc),
|
||||
)
|
||||
session.add(note)
|
||||
await session.flush()
|
||||
note_id_map[n_data["id"]] = note.id
|
||||
if n_data.get("parent_id"):
|
||||
note_objects.append((n_data["parent_id"], note.id))
|
||||
stats["notes"] += 1
|
||||
|
||||
# 5. Notes — second pass: patch parent_id
|
||||
for old_parent_id, new_note_id in note_objects:
|
||||
new_parent_id = note_id_map.get(old_parent_id)
|
||||
if new_parent_id:
|
||||
note_row = await session.get(Note, new_note_id)
|
||||
if note_row:
|
||||
note_row.parent_id = new_parent_id
|
||||
|
||||
# 6. TaskLogs
|
||||
for tl_data in data.get("task_logs", []):
|
||||
mapped_uid = user_id_map.get(tl_data.get("user_id", 0))
|
||||
mapped_nid = note_id_map.get(tl_data.get("note_id", 0))
|
||||
if mapped_uid is None or mapped_nid is None:
|
||||
continue
|
||||
from fabledassistant.models.task_log import TaskLog
|
||||
tl = TaskLog(
|
||||
user_id=mapped_uid,
|
||||
note_id=mapped_nid,
|
||||
description=tl_data.get("description", ""),
|
||||
duration_minutes=tl_data.get("duration_minutes"),
|
||||
logged_at=datetime.fromisoformat(tl_data["logged_at"]) if tl_data.get("logged_at") else None,
|
||||
created_at=datetime.fromisoformat(tl_data["created_at"]) if tl_data.get("created_at") else datetime.now(timezone.utc),
|
||||
)
|
||||
session.add(tl)
|
||||
stats["task_logs"] += 1
|
||||
|
||||
# 7. NoteDrafts
|
||||
for nd_data in data.get("note_drafts", []):
|
||||
mapped_uid = user_id_map.get(nd_data.get("user_id", 0))
|
||||
mapped_nid = note_id_map.get(nd_data.get("note_id", 0))
|
||||
if mapped_uid is None or mapped_nid is None:
|
||||
continue
|
||||
from fabledassistant.models.note_draft import NoteDraft
|
||||
nd = NoteDraft(
|
||||
user_id=mapped_uid,
|
||||
note_id=mapped_nid,
|
||||
title=nd_data.get("title", ""),
|
||||
body=nd_data.get("body", ""),
|
||||
saved_at=datetime.fromisoformat(nd_data["saved_at"]) if nd_data.get("saved_at") else None,
|
||||
)
|
||||
session.add(nd)
|
||||
stats["note_drafts"] += 1
|
||||
|
||||
# 8. Conversations + Messages
|
||||
for c_data in data.get("conversations", []):
|
||||
mapped_uid = user_id_map.get(c_data.get("user_id", 0))
|
||||
if mapped_uid is None:
|
||||
continue
|
||||
conv = Conversation(
|
||||
user_id=mapped_uid,
|
||||
title=c_data.get("title", ""),
|
||||
created_at=datetime.fromisoformat(c_data["created_at"]) if c_data.get("created_at") else datetime.now(timezone.utc),
|
||||
updated_at=datetime.fromisoformat(c_data["updated_at"]) if c_data.get("updated_at") else datetime.now(timezone.utc),
|
||||
)
|
||||
session.add(conv)
|
||||
await session.flush()
|
||||
stats["conversations"] += 1
|
||||
for m_data in c_data.get("messages", []):
|
||||
msg = Message(
|
||||
conversation_id=conv.id,
|
||||
role=m_data["role"],
|
||||
content=m_data.get("content", ""),
|
||||
context_note_id=note_id_map.get(m_data["context_note_id"]) if m_data.get("context_note_id") else None,
|
||||
created_at=datetime.fromisoformat(m_data["created_at"]) if m_data.get("created_at") else datetime.now(timezone.utc),
|
||||
)
|
||||
session.add(msg)
|
||||
stats["messages"] += 1
|
||||
|
||||
# 9. Settings
|
||||
for s_data in data.get("settings", []):
|
||||
mapped_uid = user_id_map.get(s_data.get("user_id", 0))
|
||||
if mapped_uid is None:
|
||||
continue
|
||||
setting = Setting(user_id=mapped_uid, key=s_data["key"], value=s_data.get("value", ""))
|
||||
session.add(setting)
|
||||
stats["settings"] += 1
|
||||
|
||||
await session.commit()
|
||||
|
||||
logger.info("Restored v2 backup: %s", stats)
|
||||
return stats
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Add missing imports at top of file**
|
||||
|
||||
```python
|
||||
from datetime import datetime, timezone
|
||||
from fabledassistant.models.project import Project
|
||||
from fabledassistant.models.milestone import Milestone
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Test restore round-trip**
|
||||
|
||||
```bash
|
||||
# Export
|
||||
curl -s -b cookies.txt "http://localhost:5000/api/admin/backup?scope=full" -o /tmp/backup_v2.json
|
||||
# Inspect structure
|
||||
python3 -c "import json; d=json.load(open('/tmp/backup_v2.json')); print(list(d.keys()))"
|
||||
# Expected keys: version, scope, exported_at, users, projects, milestones, notes, task_logs, ...
|
||||
```
|
||||
|
||||
- [ ] **Step 5: Typecheck**
|
||||
|
||||
```bash
|
||||
docker compose exec app python -m py_compile src/fabledassistant/services/backup.py
|
||||
```
|
||||
Expected: No errors.
|
||||
|
||||
- [ ] **Step 6: Commit**
|
||||
|
||||
```bash
|
||||
git add src/fabledassistant/services/backup.py
|
||||
git commit -m "feat(backup): v2 restore with full FK re-mapping; v1 restore preserved"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 4: Verification
|
||||
|
||||
- [ ] **Step 1: Full round-trip test**
|
||||
|
||||
1. Export full backup as admin
|
||||
2. Verify JSON has `"version": 2` and all expected top-level keys
|
||||
3. Verify notes have `project_id`, `milestone_id`, `is_task` fields
|
||||
4. Verify `task_logs` array has entries (create a task log entry first if needed)
|
||||
5. Restore backup to a clean test instance (or verify restore code path runs without error in dry-run)
|
||||
|
||||
- [ ] **Step 2: V1 backward compat test**
|
||||
|
||||
Take an old v1 backup JSON (or construct one without the `version` key) and run restore. Verify it takes the v1 path and doesn't error.
|
||||
|
||||
- [ ] **Step 3: Commit final verification note**
|
||||
|
||||
```bash
|
||||
git commit --allow-empty -m "chore(backup): v2 backup rewrite verified"
|
||||
```
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,285 +0,0 @@
|
||||
# Briefing Service Improvements — Design Spec
|
||||
|
||||
**Date:** 2026-03-25
|
||||
**Status:** Approved
|
||||
**Scope:** Web-first (no Android changes in this cycle)
|
||||
|
||||
---
|
||||
|
||||
## Problem Statement
|
||||
|
||||
The daily briefing has several usability issues:
|
||||
|
||||
1. **Task repetition** — tasks are restated identically every day regardless of whether anything changed, making the briefing feel stale and hard to scan.
|
||||
2. **RSS repetition** — the same news stories resurface across days with no mechanism to learn what the user cares about.
|
||||
3. **No path to sources** — news items are summarised in prose with no link to the original article.
|
||||
4. **Stale weather** — if the weather cache is outdated, the briefing silently uses old data rather than failing gracefully. The current prose weather format is also hard to scan.
|
||||
5. **No feedback loop** — there is no way to teach the briefing what topics are interesting or uninteresting.
|
||||
|
||||
---
|
||||
|
||||
## Approach
|
||||
|
||||
**Pre-processing pipeline with explicit state tracking.** Rather than relying on the synthesis LLM to handle deduplication and filtering, we add deterministic pre-processing steps before synthesis runs. Each concern is isolated: task change detection, RSS topic classification and filtering, weather staleness gating. The synthesis LLM receives pre-filtered, structured input and focuses on tone and flow.
|
||||
|
||||
---
|
||||
|
||||
## Data Model
|
||||
|
||||
### Migration: `0028_add_briefing_improvements`
|
||||
|
||||
**`rss_items` table — two new columns**
|
||||
|
||||
```sql
|
||||
ALTER TABLE rss_items ADD COLUMN IF NOT EXISTS topics TEXT[] DEFAULT '{}';
|
||||
ALTER TABLE rss_items ADD COLUMN IF NOT EXISTS classified_at TIMESTAMPTZ;
|
||||
```
|
||||
|
||||
`topics` stores LLM-assigned topic tags (e.g. `["technology", "ai"]`). `classified_at` is NULL until classification runs, allowing backfill queries. The `RssFeed` / `RssItem` SQLAlchemy model (`models/rss_feed.py`) must also be updated to add these two mapped columns and expose them in `to_dict()`.
|
||||
|
||||
**`messages` table — new metadata column**
|
||||
|
||||
```sql
|
||||
ALTER TABLE messages ADD COLUMN IF NOT EXISTS metadata JSONB;
|
||||
```
|
||||
|
||||
The briefing pipeline populates this when it creates the compiled message. The frontend reads it when loading the conversation to render the `WeatherCard` and attach reaction buttons. No SSE events are needed — structured data travels with the message record.
|
||||
|
||||
Schema stored in `metadata`:
|
||||
```json
|
||||
{
|
||||
"weather": {
|
||||
"location": "Berlin",
|
||||
"fetched_at": "2026-03-25T06:00:00Z",
|
||||
"current_temp": 12,
|
||||
"condition": "Partly Cloudy",
|
||||
"today_high": 16,
|
||||
"today_low": 8,
|
||||
"yesterday_high": 14,
|
||||
"yesterday_low": 9,
|
||||
"forecast": [
|
||||
{"day": "Wed", "condition": "Sunny", "high": 18, "low": 10},
|
||||
{"day": "Thu", "condition": "Cloudy", "high": 14, "low": 9}
|
||||
]
|
||||
},
|
||||
"rss_item_ids": [42, 17, 89, 103, 55]
|
||||
}
|
||||
```
|
||||
|
||||
If weather is unavailable, `metadata.weather` is `null` and the card renders a failure placeholder. The `Message` SQLAlchemy model (`models/conversation.py`) must be updated to add the `metadata` mapped column.
|
||||
|
||||
**New table: `rss_item_reactions`**
|
||||
|
||||
```sql
|
||||
CREATE TABLE IF NOT EXISTS rss_item_reactions (
|
||||
id SERIAL PRIMARY KEY,
|
||||
user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
|
||||
rss_item_id INTEGER NOT NULL REFERENCES rss_items(id) ON DELETE CASCADE,
|
||||
reaction TEXT NOT NULL CHECK (reaction IN ('up', 'down')),
|
||||
created_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
UNIQUE (user_id, rss_item_id)
|
||||
);
|
||||
CREATE INDEX IF NOT EXISTS ix_rss_item_reactions_user_id ON rss_item_reactions(user_id);
|
||||
```
|
||||
|
||||
One reaction per user per item. A second click on the same button removes the reaction; clicking the opposite button flips it.
|
||||
|
||||
**New table: `briefing_task_snapshot`**
|
||||
|
||||
```sql
|
||||
CREATE TABLE IF NOT EXISTS briefing_task_snapshot (
|
||||
id SERIAL PRIMARY KEY,
|
||||
user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
|
||||
task_id INTEGER NOT NULL REFERENCES notes(id) ON DELETE CASCADE,
|
||||
snapshot_hash TEXT NOT NULL,
|
||||
last_briefed TIMESTAMPTZ DEFAULT NOW(),
|
||||
UNIQUE (user_id, task_id)
|
||||
);
|
||||
CREATE INDEX IF NOT EXISTS ix_briefing_task_snapshot_user_id ON briefing_task_snapshot(user_id);
|
||||
```
|
||||
|
||||
`snapshot_hash` is `SHA-256(status + priority + due_date + title)`. The pipeline diffs current task state against these rows to detect what has changed since the last briefing.
|
||||
|
||||
**Settings keys (existing key-value store — no new table)**
|
||||
|
||||
- `briefing_include_topics` — JSON array of topic strings to prioritise
|
||||
- `briefing_exclude_topics` — JSON array of topics to hard-exclude from briefings
|
||||
|
||||
---
|
||||
|
||||
## Pipeline Changes
|
||||
|
||||
### Pre-processing Stage (new, runs before parallel gather)
|
||||
|
||||
Three sequential steps added to `services/briefing_pipeline.py`. Note: `_gather_internal` currently serialises tasks as dicts without `id`. It must be updated to include `task_id` in each serialised task dict (the `Note` ORM object has `.id` available) so the post-briefing snapshot upsert has the required FK value.
|
||||
|
||||
**1. Task change detection**
|
||||
|
||||
For each of the user's current tasks, compute `SHA-256(status + priority + due_date + title)` and compare against `briefing_task_snapshot`. Split into:
|
||||
- `changed_tasks` — new hash or no snapshot row (included fully in briefing)
|
||||
- `unchanged_count` — integer count passed to the synthesis prompt as context
|
||||
|
||||
The synthesis prompt receives `changed_tasks` and the instruction: "N tasks are unchanged since the last briefing — acknowledge this briefly rather than listing them."
|
||||
|
||||
**2. RSS item filtering**
|
||||
|
||||
Load the user's `briefing_include_topics` and `briefing_exclude_topics` settings, plus reaction history (last 30 days, aggregated per topic as a net score). Score each recent classified item:
|
||||
- Hard-remove items tagged with any excluded topic
|
||||
- Boost items tagged with any included or positively-reacted topic
|
||||
- Penalise items from negatively-reacted topics
|
||||
- Sort by score, take top 10
|
||||
|
||||
Items with `classified_at IS NULL` pass through unfiltered (new feeds not yet classified) and are queued for background classification.
|
||||
|
||||
**3. Weather staleness gate**
|
||||
|
||||
Check `weather_cache.fetched_at`. If older than 24 hours: skip weather entirely, set `weather_unavailable = True`. The frontend renders a `WeatherCard` placeholder in the failure state. If fresh: pass the forecast JSON (including `past_days=1` data) to the pipeline for card rendering.
|
||||
|
||||
### RSS Classification (background, triggered at fetch time)
|
||||
|
||||
When `services/rss.py` stores new items, it queues a fire-and-forget async task to classify them. Classification is a fast, non-streaming LLM call processing batches of up to 10 items:
|
||||
|
||||
```
|
||||
Classify each news item into 1-3 topics from this vocabulary:
|
||||
technology, science, politics, business, health, environment,
|
||||
local, entertainment, sports, other, [user_defined_topics]
|
||||
Return JSON: {"item_id": ["topic1", "topic2"]}
|
||||
```
|
||||
|
||||
The vocabulary is extended with the user's declared preference topics so custom interests can be matched. Results are written to `rss_items.topics` and `classified_at`.
|
||||
|
||||
Model: the user's `default_model` setting (same as chat). If the LLM is unavailable or classification fails, the item is stored with `topics = []` and `classified_at` left NULL — it will be retried the next time new items are fetched. No retry loop; classification is best-effort.
|
||||
|
||||
### Post-briefing Stage (new, runs after `post_message()` returns)
|
||||
|
||||
1. **Upsert task snapshots** — upsert `briefing_task_snapshot` rows for all tasks included in this briefing so the next run can diff against current state.
|
||||
2. **Populate message metadata** — the `metadata` dict (`weather` + `rss_item_ids`) is assembled during pre-processing and passed through to `post_message()`, which writes it to the `Message.metadata` column. No separate post-step is needed — the metadata is stored atomically with the message.
|
||||
|
||||
---
|
||||
|
||||
## Weather Card
|
||||
|
||||
The weather section is no longer generated as prose by the synthesis LLM. Instead:
|
||||
|
||||
- `services/weather.py` is updated to request `past_days=1` from Open-Meteo, including yesterday's high/low in the same API response.
|
||||
- The pipeline parses the forecast into the `metadata.weather` schema (defined in the Data Model section) and stores it on the `Message` record when `post_message()` is called.
|
||||
- `BriefingView.vue` reads `message.metadata.weather` when loading the conversation and renders `WeatherCard.vue` above the message text if the field is present.
|
||||
- The synthesis LLM's weather section is suppressed entirely — the prompt instructs it to skip weather since it is handled by the card.
|
||||
|
||||
**`WeatherCard.vue` displays:**
|
||||
- Location name and "as of" timestamp
|
||||
- Current temperature and condition
|
||||
- Today's high / low
|
||||
- Yesterday's high / low with delta ("3° warmer than yesterday")
|
||||
- Compact 3–5 day forecast strip (day name, condition, high/low)
|
||||
|
||||
**Failure state:** If `metadata.weather` is `null`, the same card position renders a muted placeholder: "Weather data unavailable — will retry at next slot."
|
||||
|
||||
---
|
||||
|
||||
## News Cards
|
||||
|
||||
### Format
|
||||
|
||||
The synthesis LLM is instructed to format each included news item as:
|
||||
|
||||
```markdown
|
||||
**[Headline text](source_url)**
|
||||
*Outlet Name · Day Month*
|
||||
One or two sentence summary of the story.
|
||||
```
|
||||
|
||||
No prose wrapper between cards. The synthesis prompt must explicitly instruct the LLM to **present news items in the exact order provided** — `metadata.rss_item_ids` records this order and the frontend maps reaction buttons positionally. Reordering by the LLM would break the mapping.
|
||||
|
||||
The briefing message structure becomes:
|
||||
1. Greeting / task summary
|
||||
2. `WeatherCard` (rendered from `message.metadata.weather`, not prose)
|
||||
3. News cards (markdown blocks with links)
|
||||
4. Calendar / other sections
|
||||
|
||||
### Reaction Buttons
|
||||
|
||||
`BriefingView.vue` reads `message.metadata.rss_item_ids` when loading the conversation. The ordered list of IDs maps directly to the news cards in the rendered message (cards appear in synthesis output in the same order). A 👍 / 👎 pair is rendered below each card. Reaction buttons are only shown in the briefing view — not in message history exports.
|
||||
|
||||
Clicking a reaction:
|
||||
1. Optimistic UI update (button enters selected state immediately)
|
||||
2. `POST /api/briefing/rss-reactions` — `{rss_item_id, reaction}`
|
||||
3. Backend validates ownership: joins through `rss_items → rss_feeds` to confirm `rss_feeds.user_id = g.user.id` before upserting
|
||||
4. Upserts into `rss_item_reactions` — same reaction removes it, opposite flips it
|
||||
|
||||
**New endpoints in `routes/briefing.py`:**
|
||||
- `POST /api/briefing/rss-reactions` — upsert or remove reaction (ownership-checked)
|
||||
- `DELETE /api/briefing/rss-reactions/:item_id` — explicit removal (useful for MCP/external API consumers that cannot use the toggle behaviour of POST)
|
||||
|
||||
---
|
||||
|
||||
## Topic Preferences UI
|
||||
|
||||
**Settings → Briefing tab — new "News Preferences" subsection** (added below existing RSS feed management):
|
||||
|
||||
Two chip-input fields using the existing `TagInput.vue` component:
|
||||
- **Interested in** → `briefing_include_topics` setting
|
||||
- **Not interested in** → `briefing_exclude_topics` setting
|
||||
|
||||
A collapsed hint lists the standard topic vocabulary so users know valid terms. Custom terms are accepted — the RSS classifier will attempt to match them.
|
||||
|
||||
Saved via the existing `PUT /api/settings/:key` endpoint.
|
||||
|
||||
---
|
||||
|
||||
## MCP Tool Additions
|
||||
|
||||
New file: `fable-mcp/fable_mcp/tools/briefing.py`
|
||||
|
||||
Three tools registered in `server.py`:
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `add_rss_feed(url, title=None, category=None)` | Adds a feed to the user's RSS list. `title` is optional — the feed title is auto-populated from feed metadata after the first fetch, but an override can be passed. Returns the created feed object. |
|
||||
| `list_rss_feeds()` | Returns current feed list with id, title, url, category, last_fetched_at. |
|
||||
| `remove_rss_feed(feed_id)` | Removes a feed by ID. |
|
||||
|
||||
These call existing RSS endpoints in `routes/briefing.py` via `FableClient`. No new backend routes required.
|
||||
|
||||
---
|
||||
|
||||
## New Backend Files
|
||||
|
||||
| File | Purpose |
|
||||
|------|---------|
|
||||
| `services/briefing_preferences.py` | Load/compute topic preference weights; apply to RSS item scoring |
|
||||
| `services/rss_classifier.py` | Batch LLM classification of RSS items; background task management |
|
||||
|
||||
## Modified Backend Files
|
||||
|
||||
| File | Changes |
|
||||
|------|---------|
|
||||
| `services/briefing_pipeline.py` | Add pre-processing and post-briefing stages; carry `task_id` through serialised task dicts; pass `metadata` dict to `post_message()` |
|
||||
| `services/rss.py` | Trigger background classification after storing new items |
|
||||
| `services/weather.py` | Add `past_days=1` to Open-Meteo request; expose parsed yesterday data |
|
||||
| `routes/briefing.py` | Add `POST/DELETE /api/briefing/rss-reactions` endpoints |
|
||||
| `models/rss_feed.py` | Add `topics` and `classified_at` mapped columns to `RssItem`; expose in `to_dict()` |
|
||||
| `models/conversation.py` | Add `metadata` JSONB mapped column to `Message`; update `to_dict()` to include `metadata` in the returned dict |
|
||||
| `services/briefing_conversations.py` | Extend `post_message(conversation_id, role, content)` signature to accept an optional `metadata: dict \| None = None` parameter; pass it to the `Message(...)` constructor |
|
||||
|
||||
## New Frontend Files
|
||||
|
||||
| File | Purpose |
|
||||
|------|---------|
|
||||
| `components/WeatherCard.vue` | Weather display card (current, today, yesterday delta, 3-5 day strip, failure state) |
|
||||
|
||||
## Modified Frontend Files
|
||||
|
||||
| File | Changes |
|
||||
|------|---------|
|
||||
| `views/BriefingView.vue` | Read `message.metadata.weather` on conversation load → render `WeatherCard.vue` above message text; read `message.metadata.rss_item_ids` → attach reaction buttons to news cards in order |
|
||||
| `views/SettingsView.vue` | Add "News Preferences" subsection with two `TagInput` fields |
|
||||
| `api/client.ts` | Add `postRssReaction()`, `deleteRssReaction()` helpers |
|
||||
|
||||
---
|
||||
|
||||
## Out of Scope
|
||||
|
||||
- Android companion app changes (web-first; parity deferred)
|
||||
- Full numeric scoring system (Approach C) — can evolve to this once reaction data accumulates
|
||||
- Push notification integration for briefing reactions
|
||||
@@ -1,214 +0,0 @@
|
||||
# Internal Calendar with CalDAV Sync — Design Spec
|
||||
|
||||
## Goal
|
||||
|
||||
Add an internal event store to Fable's database, a full calendar UI (month/week grid), and a best-effort push sync to the user's existing external CalDAV server. Fable becomes the source of truth for events; CalDAV is an optional downstream target.
|
||||
|
||||
## Background
|
||||
|
||||
The existing `services/caldav.py` lets the AI assistant create, update, and delete events directly on an external CalDAV server (Nextcloud, etc.) via tool calls. There is no calendar UI and no internal event storage — all reads go to CalDAV at query time. The `events` DB table and `models/event.py` exist as dead code from an abandoned Radicale integration (created in migration `0019_add_events`); the table exists in the database but all columns are empty.
|
||||
|
||||
This design revives the internal event store, adds a REST API and calendar view, and re-wires the AI tools to write through the internal DB so all events are accessible regardless of CalDAV availability.
|
||||
|
||||
---
|
||||
|
||||
## Architecture
|
||||
|
||||
### Source of Truth
|
||||
|
||||
Fable's `events` DB table is the single source of truth. CalDAV sync is a best-effort push: after every create, update, or delete, a background task attempts to mirror the change to the user's configured CalDAV server. If CalDAV is unconfigured or unreachable, the operation still succeeds and the event remains in Fable.
|
||||
|
||||
### Timezone Handling
|
||||
|
||||
- **Storage:** `start_dt` / `end_dt` stored as UTC (`TIMESTAMPTZ`).
|
||||
- **Display:** FullCalendar configured with `timeZone: 'local'` — renders in the browser's IANA timezone automatically.
|
||||
- **Input:** Frontend datetime inputs are in local time; converted to a timezone-aware ISO string (with UTC offset) before the API call. Backend parses to UTC.
|
||||
- **CalDAV push:** Uses the user's `caldav_timezone` setting for iCal `DTSTART`/`DTEND`, consistent with existing behaviour.
|
||||
- **AI tools:** The LLM receives the user's timezone in the system prompt and sends timezone-aware strings, as today.
|
||||
|
||||
---
|
||||
|
||||
## Data Model
|
||||
|
||||
### `events` table (existing since migration 0019, extend via migration 0029)
|
||||
|
||||
| Column | Type | Notes |
|
||||
|--------|------|-------|
|
||||
| `id` | `SERIAL PK` | |
|
||||
| `user_id` | `INT FK users CASCADE` | |
|
||||
| `project_id` | `INT FK projects SET NULL` nullable | Optional link to a Fable project |
|
||||
| `uid` | `TEXT` | iCal UID — UUID generated on `create_event`, embedded in CalDAV push |
|
||||
| `caldav_uid` | `TEXT DEFAULT ''` | **New.** Same value as `uid` after a successful CalDAV push (confirms sync); empty if never synced |
|
||||
| `title` | `TEXT` | |
|
||||
| `start_dt` | `TIMESTAMPTZ` | UTC |
|
||||
| `end_dt` | `TIMESTAMPTZ` nullable | UTC; null for open-ended events |
|
||||
| `all_day` | `BOOLEAN DEFAULT false` | When true, time component is ignored in display |
|
||||
| `description` | `TEXT DEFAULT ''` | |
|
||||
| `location` | `TEXT DEFAULT ''` | |
|
||||
| `color` | `TEXT DEFAULT ''` | **New.** Hex colour for calendar display (e.g. `#6366f1`) |
|
||||
| `recurrence` | `TEXT` nullable | iCal RRULE string — stored and forwarded to CalDAV; not exposed in the UI slide-over |
|
||||
| `created_at` | `TIMESTAMPTZ` | |
|
||||
| `updated_at` | `TIMESTAMPTZ` | |
|
||||
|
||||
**Migration `0029_add_calendar_columns`:** `ALTER TABLE events ADD COLUMN IF NOT EXISTS caldav_uid TEXT DEFAULT ''` and `ADD COLUMN IF NOT EXISTS color TEXT DEFAULT ''`. Raw SQL with `IF NOT EXISTS` guards (table already exists from migration 0019).
|
||||
|
||||
**`models/event.py`:** Add two `mapped_column` declarations to the `Event` class:
|
||||
```python
|
||||
caldav_uid: Mapped[str] = mapped_column(Text, default="")
|
||||
color: Mapped[str] = mapped_column(Text, default="")
|
||||
```
|
||||
Update `to_dict()` to include `"caldav_uid": self.caldav_uid` and `"color": self.color`.
|
||||
|
||||
---
|
||||
|
||||
## Service Layer
|
||||
|
||||
**`src/fabledassistant/services/events.py`** — owns all event CRUD and CalDAV push coordination.
|
||||
|
||||
### Public functions
|
||||
|
||||
```
|
||||
create_event(user_id, title, start_dt, end_dt, all_day, description, location,
|
||||
color, recurrence, project_id,
|
||||
duration, reminder_minutes, attendees, calendar_name) → Event
|
||||
get_event(user_id, event_id) → Event
|
||||
list_events(user_id, date_from, date_to) → list[Event]
|
||||
search_events(user_id, query, days_ahead=90) → list[Event]
|
||||
update_event(user_id, event_id, **fields) → Event
|
||||
delete_event(user_id, event_id) → None
|
||||
find_events_by_query(user_id, query) → list[Event]
|
||||
```
|
||||
|
||||
`duration`, `reminder_minutes`, `attendees`, and `calendar_name` are accepted by `create_event` for forwarding to CalDAV (they are not stored in the DB). `find_events_by_query` does a case-insensitive `ILIKE` search on `title` and is used by the AI `update_event` / `delete_event` tools.
|
||||
|
||||
### CalDAV push — UID strategy
|
||||
|
||||
`create_event` generates a UUID and stores it as the event's `uid`. This same UUID must be embedded as the iCal `UID` field when pushing to CalDAV. To enable this, `services/caldav.py`'s `create_event` function is **minimally modified** to accept an optional `uid: str | None = None` parameter; when provided, `event.add("uid", uid)` is called before `cal.add_component(event)`. All other CalDAV functions are unchanged.
|
||||
|
||||
On a successful push, `caldav_uid` is set to the same UUID value in the DB (confirming sync). This means `caldav_uid` is Fable's own UID confirmed-as-pushed, not a server-assigned value — which is fine since we generated it.
|
||||
|
||||
After every write to the DB:
|
||||
|
||||
- `create_event` → `asyncio.create_task(_push_create(event, user_id, extra_fields))`
|
||||
- `update_event` → `asyncio.create_task(_push_update(event, user_id))`
|
||||
- `delete_event` → `asyncio.create_task(_push_delete(caldav_uid, user_id))` if `caldav_uid` is set
|
||||
|
||||
Each push function calls the relevant function in `services/caldav.py`, marks `caldav_uid` on success, and logs a warning on failure. CalDAV being unconfigured is treated as a no-op (not an error).
|
||||
|
||||
### Match policy for AI update/delete tools
|
||||
|
||||
`find_events_by_query` returns all events where `title ILIKE '%query%'`. The calling tool applies the same match-count policy as the existing CalDAV tools: zero matches → raise `ValueError("No event found matching '…'.")`; more than 3 matches → raise `ValueError("Too many matches (N) for '…'. Be more specific. Found: …")`. One or two matches use the first result.
|
||||
|
||||
---
|
||||
|
||||
## REST API
|
||||
|
||||
**`src/fabledassistant/routes/events.py`** — new blueprint, registered in `app.py`.
|
||||
|
||||
| Method | Path | Description |
|
||||
|--------|------|-------------|
|
||||
| `GET` | `/api/events?from=&to=` | List events in ISO datetime range |
|
||||
| `POST` | `/api/events` | Create event |
|
||||
| `GET` | `/api/events/:id` | Get single event |
|
||||
| `PATCH` | `/api/events/:id` | Partial update |
|
||||
| `DELETE` | `/api/events/:id` | Delete event |
|
||||
|
||||
All routes require `@login_required`. Ownership enforced in the service layer (404 if event not owned by requesting user).
|
||||
|
||||
---
|
||||
|
||||
## AI Tool Rewiring
|
||||
|
||||
Calendar tools in `services/tools.py` are updated to call `services/events.py` instead of `services/caldav.py` directly. The `is_caldav_configured` gate that currently hides these tools is **removed** — calendar tools are always available since the internal DB is always present. The tool definitions currently grouped under `_CALDAV_TOOLS` (appended to the tools list only when `is_caldav_configured` is true) must be moved into the unconditional `_CORE_TOOLS` list (or equivalent always-included list). The tool parameter names and LLM-facing descriptions do not change.
|
||||
|
||||
| Tool | Change |
|
||||
|------|--------|
|
||||
| `create_event` | Calls `events.create_event(...)` — all existing params forwarded |
|
||||
| `list_events` | Calls `events.list_events(...)` |
|
||||
| `search_events` | Calls `events.search_events(...)` |
|
||||
| `update_event` | Calls `events.find_events_by_query(...)`, then `events.update_event(...)` |
|
||||
| `delete_event` | Calls `events.find_events_by_query(...)`, then `events.delete_event(...)` |
|
||||
|
||||
---
|
||||
|
||||
## Frontend
|
||||
|
||||
### Dependencies
|
||||
|
||||
```
|
||||
@fullcalendar/vue3
|
||||
@fullcalendar/daygrid # month view
|
||||
@fullcalendar/timegrid # week / day view
|
||||
@fullcalendar/interaction # drag-to-move, resize, click-to-create
|
||||
```
|
||||
|
||||
All MIT licensed.
|
||||
|
||||
### Components
|
||||
|
||||
**`frontend/src/views/CalendarView.vue`** — main view at `/calendar`:
|
||||
- FullCalendar instance with `timeZone: 'local'`, `initialView: 'dayGridMonth'`, header toolbar toggling between month and week
|
||||
- Loads events for the visible date range via `GET /api/events?from=&to=`
|
||||
- Re-fetches when the visible range changes
|
||||
- Click on empty date cell → opens `EventSlideOver` in create mode, pre-filled with the clicked date
|
||||
- Click on existing event → opens `EventSlideOver` in edit mode
|
||||
- Drag event to new date/time → `PATCH /api/events/:id` with updated times (optimistic update, revert on error)
|
||||
- Resize event → same
|
||||
|
||||
**`frontend/src/components/EventSlideOver.vue`** — reusable slide-over panel (same pattern as the workspace task slide-over):
|
||||
- Fields: title (required), start date/time, end date/time, all-day toggle, location, description, colour picker, optional project selector
|
||||
- `recurrence` is **not** a form field — it is stored and pushed to CalDAV via AI tools only
|
||||
- Create mode: `POST /api/events`
|
||||
- Edit mode: `PATCH /api/events/:id` + delete button (`DELETE /api/events/:id`)
|
||||
- Closes on save, cancel, or Escape
|
||||
|
||||
**`frontend/src/api/client.ts`** — add typed helpers and `EventEntry` / `CreateEventBody` interfaces:
|
||||
|
||||
```typescript
|
||||
interface EventEntry {
|
||||
id: number; uid: string; title: string;
|
||||
start_dt: string; end_dt: string | null;
|
||||
all_day: boolean; description: string; location: string;
|
||||
color: string; recurrence: string | null;
|
||||
project_id: number | null; caldav_uid: string;
|
||||
created_at: string; updated_at: string;
|
||||
}
|
||||
|
||||
listEvents(from: string, to: string): Promise<EventEntry[]>
|
||||
createEvent(body: CreateEventBody): Promise<EventEntry>
|
||||
getEvent(id: number): Promise<EventEntry>
|
||||
updateEvent(id: number, body: Partial<CreateEventBody>): Promise<EventEntry>
|
||||
deleteEvent(id: number): Promise<void>
|
||||
```
|
||||
|
||||
### Navigation
|
||||
|
||||
- `/calendar` added to Vue Router
|
||||
- Sidebar nav item added
|
||||
- Keyboard shortcut: `g` + `l` (ca**l**endar) — `c` is already taken by chat
|
||||
|
||||
---
|
||||
|
||||
## Error Handling
|
||||
|
||||
- CalDAV push failures are logged at `WARNING` level and do not surface to the user
|
||||
- If CalDAV is unconfigured, push is skipped silently
|
||||
- Drag-to-move/resize failures (PATCH error) revert the event to its previous position in FullCalendar's UI via the `revert` callback
|
||||
- 404 returned for event access by non-owner
|
||||
|
||||
---
|
||||
|
||||
## Testing
|
||||
|
||||
- `tests/test_events_service.py` — unit tests for `create_event`, `list_events`, `search_events`, `update_event`, `delete_event`, `find_events_by_query` with mocked DB session; separate test verifying CalDAV push background task is fired
|
||||
- `tests/test_events_routes.py` — route tests for all five endpoints verifying ownership enforcement and correct status codes
|
||||
- TypeScript check (`make typecheck`) after all frontend changes
|
||||
|
||||
---
|
||||
|
||||
## Out of Scope
|
||||
|
||||
- Pull sync (importing events from CalDAV into Fable) — possible future upgrade
|
||||
- Recurring event expansion in the UI (RRULE stored and forwarded to CalDAV via AI tools only)
|
||||
- Shared calendars / multi-user event invites
|
||||
- Event notifications / reminders in the Fable push system
|
||||
@@ -1,236 +0,0 @@
|
||||
# RAG Scoping and Context Isolation Design
|
||||
|
||||
> **For agentic workers:** Use superpowers:executing-plans or superpowers:subagent-driven-development to implement this plan task-by-task.
|
||||
|
||||
**Goal:** Prevent project-associated notes from polluting global chat RAG, and give the LLM tools to discover and switch project scope during a conversation.
|
||||
|
||||
**Problem being solved:** Users with multiple projects (e.g. scifi worldbuilding, personal productivity) find that semantic search pulls notes from whichever project has the most content, contaminating general-purpose chat context. Project notes should be siloed by default.
|
||||
|
||||
---
|
||||
|
||||
## Architecture
|
||||
|
||||
### Default RAG behavior change
|
||||
|
||||
Currently `rag_project_id=None` in `build_context()` searches all notes. After this change the semantics become a three-value system:
|
||||
|
||||
- `rag_project_id = None` → search only orphan notes (`project_id IS NULL`)
|
||||
- `rag_project_id = <positive int>` → search only that project's notes
|
||||
- `rag_project_id = -1` → search all notes (explicit opt-in to current global behavior)
|
||||
|
||||
**`semantic_search_notes()` change** (`services/embeddings.py`): add `orphan_only: bool = False` parameter. When `True`, add `.where(Note.project_id.is_(None))` to the SQLAlchemy query.
|
||||
|
||||
**`search_notes_for_context()` change** (`services/notes.py`): add `orphan_only: bool = False` parameter with the same filter.
|
||||
|
||||
**`build_context()` change** (`services/llm.py`): compute the flags before calling search:
|
||||
|
||||
```python
|
||||
# rag_project_id=None → orphan only; -1 → all notes; positive int → that project
|
||||
orphan_only = rag_project_id is None
|
||||
effective_project_id = rag_project_id if (rag_project_id is not None and rag_project_id != -1) else None
|
||||
|
||||
for score, note in await semantic_search_notes(
|
||||
user_id, user_message, exclude_ids=search_exclude or None, limit=8,
|
||||
project_id=effective_project_id,
|
||||
orphan_only=orphan_only,
|
||||
):
|
||||
...
|
||||
```
|
||||
|
||||
The same `orphan_only` / `effective_project_id` pattern applies to the keyword fallback call to `search_notes_for_context()`.
|
||||
|
||||
### Conversation scope persistence
|
||||
|
||||
**New DB column:** `conversations.rag_project_id INTEGER` (nullable, default `NULL`).
|
||||
|
||||
Semantics match the three-value system above. `NULL` is the default for all new and existing conversations after migration — existing conversations transparently gain orphan-only scoping.
|
||||
|
||||
**Model change** (`models/conversation.py`):
|
||||
```python
|
||||
rag_project_id: Mapped[int | None] = mapped_column(Integer, nullable=True, default=None)
|
||||
```
|
||||
|
||||
`to_dict()` must include `"rag_project_id": self.rag_project_id`.
|
||||
|
||||
**Route change** (`routes/chat.py`): `PATCH /api/chat/conversations/:id` must accept `rag_project_id` in the request body and call `update_conversation(conv_id, user_id, rag_project_id=value)`. `GET /api/chat/conversations/:id` returns `rag_project_id` via `to_dict()`.
|
||||
|
||||
**Service change** (`services/chat.py`): `update_conversation()` must accept and persist `rag_project_id`.
|
||||
|
||||
### Project summarization background job
|
||||
|
||||
**New DB columns** on `projects`:
|
||||
```python
|
||||
auto_summary: Mapped[str | None] = mapped_column(Text, nullable=True)
|
||||
summary_updated_at: Mapped[datetime | None] = mapped_column(DateTime(timezone=True), nullable=True)
|
||||
```
|
||||
|
||||
**`generate_project_summary(user_id: int, project_id: int) -> None`** (`services/projects.py`):
|
||||
- Fetches project metadata (title, description, goal)
|
||||
- Fetches up to 10 notes for that project: `SELECT title, body[:200] FROM notes WHERE project_id=? ORDER BY updated_at DESC LIMIT 10`
|
||||
- Builds an Ollama prompt: "Summarize this project in 3-4 sentences covering its purpose, themes, and content. Title: {title}. Description: {description}. Goal: {goal}. Recent notes: {sample}"
|
||||
- Calls Ollama (same `generate_completion()` helper used elsewhere, `stream=False`)
|
||||
- Stores result in `project.auto_summary` and `project.summary_updated_at = datetime.now(UTC)`
|
||||
- On Ollama failure: log debug message, return without updating (graceful degradation)
|
||||
|
||||
**`backfill_project_summaries() -> None`** (`services/projects.py`): fire-and-forget, called at startup alongside `backfill_note_embeddings()`. Generates summaries for all projects where `auto_summary IS NULL`.
|
||||
|
||||
**Trigger from `update_project()`**: after committing, call `asyncio.create_task(generate_project_summary(user_id, project_id))` unconditionally.
|
||||
|
||||
**Trigger from note saves**: in `create_note()` and `update_note()` within `services/notes.py`, when `project_id` is not None, check `project.summary_updated_at`. If `None` or more than 1 hour old, fire `asyncio.create_task(generate_project_summary(user_id, project_id))`. This avoids flooding Ollama during heavy note-editing sessions.
|
||||
|
||||
`generate_project_summary` and `backfill_project_summaries` are **internal background tasks only**, not exposed as LLM tools.
|
||||
|
||||
### New LLM tools
|
||||
|
||||
Both tools are added to `_CORE_TOOLS` in `services/tools.py`.
|
||||
|
||||
**`search_projects(query: str)`**:
|
||||
- Loads all projects for the user from the DB (title, description, goal, auto_summary)
|
||||
- Scores each project: `SequenceMatcher(None, query.lower(), combined_text.lower()).ratio()` where `combined_text = f"{title} {description or ''} {auto_summary or ''}"`, plus keyword overlap bonus
|
||||
- Returns top 5 as `[{id, title, summary_snippet, score}]` where `summary_snippet` is `auto_summary[:200]` or `description[:200]`
|
||||
- Tool result type: `"projects_list"`
|
||||
|
||||
**`set_rag_scope(project_id: int | None)`**:
|
||||
- `project_id = <positive int>` → scope to that project
|
||||
- `project_id = null` → orphan-only
|
||||
- `project_id = -1` → all notes
|
||||
- **Workspace guard:** if `workspace_project_id` is set on the current generation context, return `{success: false, error: "Cannot change RAG scope in workspace view"}` and make no changes
|
||||
- Validates positive project_id exists and belongs to user (returns error if not)
|
||||
- Calls `await update_conversation(conv_id, user_id, rag_project_id=project_id)` to persist immediately
|
||||
- Returns `{success: true, type: "rag_scope_set", scope_label: "<human-readable>"}` e.g. `"Orphan notes only"`, `"SciFi Project"`, `"All notes"`
|
||||
|
||||
**`conv_id` threading** (`services/tools.py`, `services/generation_task.py`):
|
||||
|
||||
Current `execute_tool()` signature:
|
||||
```python
|
||||
async def execute_tool(user_id: int, tool_name: str, arguments: dict) -> dict
|
||||
```
|
||||
|
||||
Updated signature:
|
||||
```python
|
||||
async def execute_tool(
|
||||
user_id: int,
|
||||
tool_name: str,
|
||||
arguments: dict,
|
||||
conv_id: int | None = None,
|
||||
workspace_project_id: int | None = None,
|
||||
) -> dict
|
||||
```
|
||||
|
||||
In `generation_task.py`, the call site in the tool execution loop must pass `conv_id=conv_id, workspace_project_id=workspace_project_id` — both are already available as local variables in `run_generation()`.
|
||||
|
||||
**SSE `new_rag_scope` wiring:**
|
||||
|
||||
In `generation_task.py`, after each tool call returns, check `if result.get("type") == "rag_scope_set" and result.get("success")`. Store `new_rag_scope = arguments["project_id"]` and `new_rag_scope_label = result["scope_label"]`.
|
||||
|
||||
When emitting the final SSE `done` event (currently `{"done": True, "message_id": msg_id, "timing": timing}`), add the scope fields when present:
|
||||
|
||||
```python
|
||||
done_payload = {"done": True, "message_id": msg_id, "timing": timing}
|
||||
if new_rag_scope_label is not None:
|
||||
done_payload["new_rag_scope"] = new_rag_scope # raw int or None
|
||||
done_payload["new_rag_scope_label"] = new_rag_scope_label
|
||||
yield f"data: {json.dumps(done_payload)}\n\n"
|
||||
```
|
||||
|
||||
In `stores/chat.ts`, the SSE `done` handler must check `event.data.new_rag_scope !== undefined` and set `currentConversation.value.rag_project_id = event.data.new_rag_scope`.
|
||||
|
||||
### Frontend scope indicator
|
||||
|
||||
**Chat store** (`stores/chat.ts`):
|
||||
- `currentConversation` already holds the full conversation object; add `rag_project_id: number | null` to the conversation interface
|
||||
- Add a computed `ragProjectId` that reads `currentConversation.value?.rag_project_id ?? null`
|
||||
- Add `async updateRagScope(convId: number, ragProjectId: number | null)` that calls `PATCH /api/chat/conversations/:id { rag_project_id }` and updates `currentConversation.value.rag_project_id` locally on success
|
||||
- In the SSE `done` handler, if `event.data.new_rag_scope !== undefined`, set `currentConversation.value.rag_project_id = event.data.new_rag_scope`
|
||||
|
||||
**ChatView** (`views/ChatView.vue`):
|
||||
- Remove the existing `ProjectSelector` from the sidebar RAG scope section
|
||||
- Add a scope chip just above the message input. Shows: `⊙ Orphan notes` (null) / `⊙ All notes` (-1) / `⊙ {project title}` (positive int)
|
||||
- Clicking opens a compact dropdown: "Orphan notes only", all active projects by title, "All notes"
|
||||
- On selection, call `chatStore.updateRagScope(convId, selectedValue)`
|
||||
- When `chatStore.ragProjectId` changes (from SSE or UI), briefly apply a CSS pulse animation to the chip
|
||||
- Load the projects list once on mount via `apiGet("/api/projects?status=active")`
|
||||
|
||||
**WorkspaceView** — no change. It hardcodes `ragProjectId` to the workspace project's id (positive int). Scope chip is not shown in workspace view.
|
||||
|
||||
---
|
||||
|
||||
## Files Changed
|
||||
|
||||
### Backend
|
||||
|
||||
| File | Change |
|
||||
|------|--------|
|
||||
| `alembic/versions/0030_rag_scoping.py` | Add `conversations.rag_project_id`, `projects.auto_summary`, `projects.summary_updated_at` |
|
||||
| `models/conversation.py` | Add `rag_project_id: Mapped[int \| None]`; include in `to_dict()` |
|
||||
| `models/project.py` | Add `auto_summary: Mapped[str \| None]`, `summary_updated_at: Mapped[datetime \| None]` |
|
||||
| `services/projects.py` | Add `generate_project_summary()`, `backfill_project_summaries()`; trigger from `update_project()` |
|
||||
| `services/notes.py` | Add `orphan_only` param to `search_notes_for_context()`; trigger summary regen from note saves |
|
||||
| `services/embeddings.py` | Add `orphan_only: bool = False` param to `semantic_search_notes()` |
|
||||
| `services/llm.py` | Compute `orphan_only` + `effective_project_id` from `rag_project_id`; pass to both search calls |
|
||||
| `services/tools.py` | Add `search_projects` and `set_rag_scope` definitions and handlers; update `execute_tool()` signature |
|
||||
| `services/generation_task.py` | Pass `conv_id` + `workspace_project_id` to `execute_tool()`; capture scope change; emit in SSE done |
|
||||
| `services/chat.py` | Add `rag_project_id` parameter to `update_conversation()` |
|
||||
| `routes/chat.py` | Accept `rag_project_id` in PATCH body; return in GET responses via `to_dict()` |
|
||||
| `app.py` | Call `backfill_project_summaries()` at startup |
|
||||
|
||||
### Frontend
|
||||
|
||||
| File | Change |
|
||||
|------|--------|
|
||||
| `api/client.ts` | Conversation type includes `rag_project_id`; helpers accept it |
|
||||
| `stores/chat.ts` | `ragProjectId` computed; `updateRagScope()` method; SSE done handler updates scope |
|
||||
| `views/ChatView.vue` | Replace sidebar `ProjectSelector` with scope chip above input bar |
|
||||
|
||||
---
|
||||
|
||||
## Data Flow
|
||||
|
||||
```
|
||||
User changes scope via chip
|
||||
→ chatStore.updateRagScope(convId, value)
|
||||
→ PATCH /api/chat/conversations/:id { rag_project_id: value }
|
||||
→ DB updated; currentConversation.rag_project_id updated locally
|
||||
→ chip re-renders immediately
|
||||
|
||||
User sends message
|
||||
→ sendMessage() reads chatStore.ragProjectId → passes as rag_project_id in POST body
|
||||
→ build_context() derives orphan_only + effective_project_id
|
||||
→ RAG results scoped accordingly
|
||||
|
||||
Model calls set_rag_scope(3) during generation
|
||||
→ execute_tool(conv_id=X, workspace_project_id=None) writes rag_project_id=3 to DB
|
||||
→ returns { success: true, type: "rag_scope_set", scope_label: "SciFi Project" }
|
||||
→ generation_task stores new_rag_scope=3, new_rag_scope_label="SciFi Project"
|
||||
→ SSE done event: { done: true, new_rag_scope: 3, new_rag_scope_label: "SciFi Project", ... }
|
||||
→ chat store done handler: currentConversation.rag_project_id = 3
|
||||
→ chip pulses → "⊙ SciFi Project"
|
||||
|
||||
User opens existing conversation
|
||||
→ GET /api/chat/conversations/:id returns rag_project_id
|
||||
→ chat store sets currentConversation; ragProjectId computed picks it up
|
||||
→ chip renders correct scope immediately
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Error Handling
|
||||
|
||||
- **Ollama unavailable during summary gen:** log debug, return without updating; old summary (or null) retained; `search_projects` falls back to title + description matching
|
||||
- **`set_rag_scope` called in workspace:** return `{success: false, error: "Cannot change RAG scope in workspace view"}`; no DB write
|
||||
- **`set_rag_scope` with unknown positive project_id:** return `{success: false, error: "Project not found"}`; scope unchanged
|
||||
- **`search_projects` with no summaries yet:** score on title + description only; still returns results
|
||||
- **Existing conversations after migration:** `rag_project_id` defaults to `NULL` → orphan-only; behavior silently improves without user action
|
||||
|
||||
---
|
||||
|
||||
## Testing
|
||||
|
||||
- Unit: `semantic_search_notes(orphan_only=True)` returns only notes where `project_id IS NULL`
|
||||
- Unit: `semantic_search_notes(project_id=3, orphan_only=False)` returns only notes for project 3
|
||||
- Unit: `build_context()` passes correct `orphan_only` / `effective_project_id` for all three `rag_project_id` values (None, -1, positive)
|
||||
- Unit: `search_projects()` scoring ranks correct project first for representative queries; degrades gracefully with no summaries
|
||||
- Unit: `generate_project_summary()` builds correct Ollama prompt; handles Ollama failure gracefully
|
||||
- Integration: `set_rag_scope()` handler writes to DB, returns correct scope_label, rejects in workspace context
|
||||
- Integration: SSE `done` event includes `new_rag_scope` when scope changes mid-conversation
|
||||
- Frontend: scope chip reflects loaded conversation scope; updates reactively on model tool call
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,594 @@
|
||||
# Streaming TTS 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:** Start playing TTS audio during LLM generation by splitting responses into sentences and synthesizing each sentence as it completes, rather than waiting for the full response.
|
||||
|
||||
**Architecture:** A new `useStreamingTts` composable watches `streamingContent` for sentence boundaries, fires per-sentence `synthesiseSpeech` requests concurrently, and plays audio in strict insertion order using `useVoiceAudio`. ChatView, BriefingView, and WorkspaceView all use this composable, replacing their current post-stream speak logic.
|
||||
|
||||
**Tech Stack:** Vue 3 Composition API, TypeScript, `useVoiceAudio` (existing), `synthesiseSpeech` from `api/client.ts` (existing), no backend changes.
|
||||
|
||||
---
|
||||
|
||||
## File Map
|
||||
|
||||
| Action | File | Responsibility |
|
||||
|--------|------|----------------|
|
||||
| **Create** | `frontend/src/composables/useStreamingTts.ts` | All streaming TTS logic: sentence splitting, TTS queuing, ordered playback |
|
||||
| **Modify** | `frontend/src/views/ChatView.vue` | Replace `speakLastAssistantMessage` + old watch with `useStreamingTts` |
|
||||
| **Modify** | `frontend/src/views/BriefingView.vue` | Replace `speakText` + `listenToLatest` + old watch with `useStreamingTts` |
|
||||
| **Modify** | `frontend/src/views/WorkspaceView.vue` | Add listen mode toggle button + `useStreamingTts` |
|
||||
|
||||
---
|
||||
|
||||
## Task 1: Create `useStreamingTts` composable
|
||||
|
||||
**Files:**
|
||||
- Create: `frontend/src/composables/useStreamingTts.ts`
|
||||
|
||||
- [ ] **Step 1: Create the composable**
|
||||
|
||||
Create `frontend/src/composables/useStreamingTts.ts` with the full implementation:
|
||||
|
||||
```typescript
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import type { Ref, ComputedRef } from 'vue'
|
||||
import { synthesiseSpeech } from '@/api/client'
|
||||
import { useVoiceAudio } from '@/composables/useVoiceAudio'
|
||||
|
||||
/** Minimum stripped character count to bother synthesizing. */
|
||||
const MIN_CHARS = 3
|
||||
|
||||
/** Matches sentence-terminal punctuation followed by whitespace or end-of-string. */
|
||||
const SENTENCE_BOUNDARY = /[.!?]+(?=\s|$)/
|
||||
|
||||
function stripMarkdown(text: string): string {
|
||||
return text
|
||||
.replace(/```[\s\S]*?```/g, '')
|
||||
.replace(/`[^`]+`/g, (m) => m.slice(1, -1))
|
||||
.replace(/#{1,6}\s+/g, '')
|
||||
.replace(/\*\*([^*]+)\*\*/g, '$1')
|
||||
.replace(/\*([^*]+)\*/g, '$1')
|
||||
.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
|
||||
.replace(/^\s*[-*+]\s+/gm, '')
|
||||
.replace(/\n{2,}/g, ' ')
|
||||
.trim()
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract completed sentences from `text` using SENTENCE_BOUNDARY.
|
||||
* Returns the sentences found and the unconsumed remainder.
|
||||
*/
|
||||
function extractSentences(text: string): { sentences: string[]; remainder: string } {
|
||||
const sentences: string[] = []
|
||||
let remaining = text
|
||||
let match: RegExpExecArray | null
|
||||
|
||||
while ((match = SENTENCE_BOUNDARY.exec(remaining)) !== null) {
|
||||
const boundary = match.index + match[0].length
|
||||
const sentence = remaining.slice(0, boundary).trim()
|
||||
if (sentence) sentences.push(sentence)
|
||||
remaining = remaining.slice(boundary)
|
||||
}
|
||||
|
||||
return { sentences, remainder: remaining }
|
||||
}
|
||||
|
||||
export interface UseStreamingTtsOptions {
|
||||
streamingContent: Ref<string> | ComputedRef<string>
|
||||
streaming: Ref<boolean> | ComputedRef<boolean>
|
||||
enabled: Ref<boolean> | ComputedRef<boolean>
|
||||
}
|
||||
|
||||
export interface UseStreamingTtsReturn {
|
||||
/** True while any synthesis request is in-flight or audio is playing. */
|
||||
speaking: ComputedRef<boolean>
|
||||
/** Cancel all in-flight synthesis/playback and clear the queue. */
|
||||
stop: () => void
|
||||
}
|
||||
|
||||
export function useStreamingTts(options: UseStreamingTtsOptions): UseStreamingTtsReturn {
|
||||
const { streamingContent, streaming, enabled } = options
|
||||
const audio = useVoiceAudio()
|
||||
|
||||
let sentenceBuffer = ''
|
||||
let lastSeenLength = 0
|
||||
let abortId = 0
|
||||
let playQueue: Promise<void> = Promise.resolve()
|
||||
const pendingCount = ref(0)
|
||||
|
||||
const speaking = computed(() => pendingCount.value > 0 || audio.playing.value)
|
||||
|
||||
function stop(): void {
|
||||
abortId++
|
||||
sentenceBuffer = ''
|
||||
lastSeenLength = 0
|
||||
playQueue = Promise.resolve()
|
||||
audio.stop()
|
||||
pendingCount.value = 0
|
||||
}
|
||||
|
||||
async function enqueueSentence(sentence: string, myAbortId: number): Promise<void> {
|
||||
const stripped = stripMarkdown(sentence)
|
||||
if (stripped.length < MIN_CHARS) return
|
||||
|
||||
pendingCount.value++
|
||||
let blob: Blob | null = null
|
||||
try {
|
||||
blob = await synthesiseSpeech(stripped)
|
||||
} catch (e) {
|
||||
console.warn('[StreamingTTS] Synthesis failed, retrying sentence', { sentence: stripped, error: e })
|
||||
try {
|
||||
blob = await synthesiseSpeech(stripped)
|
||||
} catch (e2) {
|
||||
console.warn('[StreamingTTS] Retry also failed, skipping sentence', { sentence: stripped, error: e2 })
|
||||
}
|
||||
} finally {
|
||||
pendingCount.value--
|
||||
}
|
||||
|
||||
if (!blob) return
|
||||
|
||||
// Capture blob for the closure — TS can't narrow after async gap
|
||||
const resolvedBlob = blob
|
||||
playQueue = playQueue.then(async () => {
|
||||
if (abortId !== myAbortId) return
|
||||
await audio.play(resolvedBlob)
|
||||
})
|
||||
}
|
||||
|
||||
function dispatchBuffer(flush: boolean): void {
|
||||
if (!enabled.value) return
|
||||
const myAbortId = abortId
|
||||
const { sentences, remainder } = extractSentences(sentenceBuffer)
|
||||
sentenceBuffer = flush ? '' : remainder
|
||||
for (const sentence of sentences) {
|
||||
enqueueSentence(sentence, myAbortId)
|
||||
}
|
||||
if (flush && remainder.trim().length >= MIN_CHARS) {
|
||||
enqueueSentence(remainder.trim(), myAbortId)
|
||||
}
|
||||
}
|
||||
|
||||
// Watch accumulating content — extract new characters since last check
|
||||
watch(streamingContent, (newContent) => {
|
||||
if (!enabled.value) return
|
||||
const delta = newContent.slice(lastSeenLength)
|
||||
lastSeenLength = newContent.length
|
||||
sentenceBuffer += delta
|
||||
dispatchBuffer(false)
|
||||
})
|
||||
|
||||
// Watch streaming flag — stop on new message start, flush on end
|
||||
watch(streaming, (isStreaming) => {
|
||||
if (!enabled.value) return
|
||||
if (isStreaming) {
|
||||
// New message starting — cancel previous response's audio
|
||||
stop()
|
||||
} else {
|
||||
// Stream ended — flush any remaining fragment
|
||||
dispatchBuffer(true)
|
||||
lastSeenLength = 0
|
||||
}
|
||||
})
|
||||
|
||||
return { speaking, stop }
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: TypeScript check**
|
||||
|
||||
```bash
|
||||
cd /home/bvandeusen/Nextcloud/Projects/fabledassistant/frontend
|
||||
npx vue-tsc --noEmit 2>&1 | head -40
|
||||
```
|
||||
|
||||
Expected: no errors mentioning `useStreamingTts.ts`.
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add frontend/src/composables/useStreamingTts.ts
|
||||
git commit -m "feat(tts): add useStreamingTts composable for sentence-level streaming"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 2: Update ChatView
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/src/views/ChatView.vue`
|
||||
|
||||
Current TTS code to remove (lines ~35–66):
|
||||
|
||||
```typescript
|
||||
// REMOVE these:
|
||||
const synthesising = ref(false);
|
||||
|
||||
async function speakLastAssistantMessage() { ... } // entire function
|
||||
|
||||
watch(() => store.streaming, async (streaming) => {
|
||||
if (!streaming && listenMode.value && voiceTtsEnabled.value) {
|
||||
await new Promise((r) => setTimeout(r, 200));
|
||||
await speakLastAssistantMessage();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Also remove the `synthesiseSpeech` import from `@/api/client` (it is no longer called directly in this file).
|
||||
|
||||
- [ ] **Step 1: Add import and replace TTS logic**
|
||||
|
||||
In `frontend/src/views/ChatView.vue`:
|
||||
|
||||
1. Add to imports at the top of `<script setup>`:
|
||||
```typescript
|
||||
import { useStreamingTts } from "@/composables/useStreamingTts";
|
||||
```
|
||||
|
||||
2. Remove `synthesiseSpeech` from the `@/api/client` import line (keep other imports like `apiGet`, `transcribeAudio`).
|
||||
|
||||
3. Remove `const synthesising = ref(false);` (line ~35).
|
||||
|
||||
4. Remove the entire `speakLastAssistantMessage` function (lines ~38–59).
|
||||
|
||||
5. Remove the `watch(() => store.streaming, ...)` block that called `speakLastAssistantMessage` (lines ~61–66).
|
||||
|
||||
6. Add after `const listenMode = useListenMode();`:
|
||||
```typescript
|
||||
const tts = useStreamingTts({
|
||||
streamingContent: computed(() => store.streamingContent),
|
||||
streaming: computed(() => store.streaming),
|
||||
enabled: computed(() => listenMode.value && voiceTtsEnabled.value),
|
||||
});
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Update template references**
|
||||
|
||||
In the ChatView template, replace every occurrence of `synthesising` with `tts.speaking.value`:
|
||||
|
||||
Find (line ~919):
|
||||
```html
|
||||
:class="{ 'btn-listen--active': listenMode, 'btn-listen--busy': synthesising || audio.playing.value }"
|
||||
```
|
||||
Replace with:
|
||||
```html
|
||||
:class="{ 'btn-listen--active': listenMode, 'btn-listen--busy': tts.speaking.value }"
|
||||
```
|
||||
|
||||
Find (line ~920):
|
||||
```html
|
||||
@click="listenMode = !listenMode; if (listenMode) speakLastAssistantMessage()"
|
||||
```
|
||||
Replace with:
|
||||
```html
|
||||
@click="listenMode = !listenMode; if (!listenMode) tts.stop()"
|
||||
```
|
||||
|
||||
Find (line ~924):
|
||||
```html
|
||||
<svg v-if="!synthesising && !audio.playing.value" ...>
|
||||
```
|
||||
Replace with:
|
||||
```html
|
||||
<svg v-if="!tts.speaking.value" ...>
|
||||
```
|
||||
|
||||
Note: the `audio` variable (`useVoiceAudio()`) is still used for the volume slider and PTT stop — do NOT remove it.
|
||||
|
||||
- [ ] **Step 3: TypeScript check**
|
||||
|
||||
```bash
|
||||
cd /home/bvandeusen/Nextcloud/Projects/fabledassistant/frontend
|
||||
npx vue-tsc --noEmit 2>&1 | head -40
|
||||
```
|
||||
|
||||
Expected: no errors.
|
||||
|
||||
- [ ] **Step 4: Commit**
|
||||
|
||||
```bash
|
||||
git add frontend/src/views/ChatView.vue
|
||||
git commit -m "feat(tts): wire useStreamingTts into ChatView"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 3: Update BriefingView
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/src/views/BriefingView.vue`
|
||||
|
||||
Current TTS code to remove:
|
||||
|
||||
```typescript
|
||||
// REMOVE:
|
||||
const synthesising = ref(false)
|
||||
|
||||
async function speakText(text: string) { ... } // entire function
|
||||
async function listenToLatest() { ... } // entire function
|
||||
|
||||
// REMOVE this watch block (the TTS one — keep the other streaming watch):
|
||||
watch(() => chatStore.streaming, async (streaming) => {
|
||||
if (!streaming && listenMode.value && voiceTtsEnabled.value) {
|
||||
await new Promise((r) => setTimeout(r, 200))
|
||||
await listenToLatest()
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Note: BriefingView has **two** `watch(() => chatStore.streaming, ...)` blocks. Keep the first one (lines ~152–156, which refreshes messages). Remove only the TTS one (lines ~327–332).
|
||||
|
||||
Also remove the `synthesiseSpeech` import from `@/api/client`.
|
||||
|
||||
- [ ] **Step 1: Add import and replace TTS logic**
|
||||
|
||||
In `frontend/src/views/BriefingView.vue`:
|
||||
|
||||
1. Add to imports:
|
||||
```typescript
|
||||
import { useStreamingTts } from '@/composables/useStreamingTts'
|
||||
```
|
||||
|
||||
2. Remove `synthesiseSpeech` from the `@/api/client` import line.
|
||||
|
||||
3. Remove `const synthesising = ref(false)`.
|
||||
|
||||
4. Remove the entire `speakText` function.
|
||||
|
||||
5. Remove the entire `listenToLatest` function.
|
||||
|
||||
6. Remove the TTS `watch(() => chatStore.streaming, ...)` block (the one that calls `listenToLatest`).
|
||||
|
||||
7. Add after `const listenMode = useListenMode()`:
|
||||
```typescript
|
||||
const tts = useStreamingTts({
|
||||
streamingContent: computed(() => chatStore.streamingContent),
|
||||
streaming: computed(() => chatStore.streaming),
|
||||
enabled: computed(() => listenMode.value && voiceTtsEnabled.value),
|
||||
})
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Update template references**
|
||||
|
||||
Find the listen toggle button in the template. Replace `synthesising` references:
|
||||
|
||||
```html
|
||||
<!-- Before -->
|
||||
:class="{ 'btn-icon-active': listenMode, 'btn-icon-busy': synthesising || audio.playing.value }"
|
||||
@click="listenMode ? (listenMode = false) : (listenMode = true, listenToLatest())"
|
||||
|
||||
<!-- After -->
|
||||
:class="{ 'btn-icon-active': listenMode, 'btn-icon-busy': tts.speaking.value }"
|
||||
@click="listenMode = !listenMode; if (!listenMode) tts.stop()"
|
||||
```
|
||||
|
||||
Find the stop button:
|
||||
```html
|
||||
<!-- Before -->
|
||||
v-if="voiceTtsEnabled && (synthesising || audio.playing.value)"
|
||||
@click="audio.stop(); synthesising = false"
|
||||
|
||||
<!-- After -->
|
||||
v-if="voiceTtsEnabled && tts.speaking.value"
|
||||
@click="tts.stop()"
|
||||
```
|
||||
|
||||
Find the spinner SVG condition:
|
||||
```html
|
||||
<!-- Before -->
|
||||
<svg v-if="!synthesising && !audio.playing.value" ...>
|
||||
|
||||
<!-- After -->
|
||||
<svg v-if="!tts.speaking.value" ...>
|
||||
```
|
||||
|
||||
- [ ] **Step 3: TypeScript check**
|
||||
|
||||
```bash
|
||||
cd /home/bvandeusen/Nextcloud/Projects/fabledassistant/frontend
|
||||
npx vue-tsc --noEmit 2>&1 | head -40
|
||||
```
|
||||
|
||||
Expected: no errors.
|
||||
|
||||
- [ ] **Step 4: Commit**
|
||||
|
||||
```bash
|
||||
git add frontend/src/views/BriefingView.vue
|
||||
git commit -m "feat(tts): wire useStreamingTts into BriefingView"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 4: Add streaming TTS to WorkspaceView
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/src/views/WorkspaceView.vue`
|
||||
|
||||
WorkspaceView has no TTS today. We add: listen mode toggle, `useStreamingTts`, and the listen button in the chat input toolbar.
|
||||
|
||||
- [ ] **Step 1: Add imports and composable**
|
||||
|
||||
In `frontend/src/views/WorkspaceView.vue`, add to the import block at the top of `<script setup>`:
|
||||
|
||||
```typescript
|
||||
import { useListenMode } from '@/composables/useListenMode'
|
||||
import { useStreamingTts } from '@/composables/useStreamingTts'
|
||||
import { useVoiceAudio } from '@/composables/useVoiceAudio'
|
||||
```
|
||||
|
||||
After the existing store setup code (after `const settingsStore = useSettingsStore()`), add:
|
||||
|
||||
```typescript
|
||||
const listenMode = useListenMode()
|
||||
const voiceTtsEnabled = computed(() => settingsStore.voiceTtsReady)
|
||||
const audio = useVoiceAudio()
|
||||
const tts = useStreamingTts({
|
||||
streamingContent: computed(() => chatStore.streamingContent),
|
||||
streaming: computed(() => chatStore.streaming),
|
||||
enabled: computed(() => listenMode.value && voiceTtsEnabled.value),
|
||||
})
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Add listen mode button to template**
|
||||
|
||||
In the `<div class="chat-input-area">` section (around line 365), add the listen button before the abort/send button:
|
||||
|
||||
```html
|
||||
<div class="chat-input-area">
|
||||
<textarea
|
||||
ref="inputEl"
|
||||
v-model="messageInput"
|
||||
class="chat-input"
|
||||
:placeholder="chatStore.streaming ? 'Type to queue next message… (Enter to queue)' : 'Message the agent… (Enter to send)'"
|
||||
rows="1"
|
||||
@keydown="onInputKeydown"
|
||||
@input="autoResize"
|
||||
></textarea>
|
||||
<!-- Listen mode toggle (TTS) -->
|
||||
<button
|
||||
v-if="voiceTtsEnabled"
|
||||
class="btn-listen-ws"
|
||||
:class="{ 'btn-listen-ws--active': listenMode, 'btn-listen-ws--busy': tts.speaking.value }"
|
||||
:title="listenMode ? 'Stop auto-read' : 'Read responses aloud'"
|
||||
aria-label="Toggle listen mode"
|
||||
@click="listenMode = !listenMode; if (!listenMode) tts.stop()"
|
||||
>
|
||||
<svg v-if="!tts.speaking.value" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
|
||||
</svg>
|
||||
<svg v-else width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M18 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C21.8 14.82 22 13.43 22 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
v-if="chatStore.streaming"
|
||||
class="btn-abort"
|
||||
title="Stop generation"
|
||||
@click="chatStore.cancelGeneration()"
|
||||
>
|
||||
■ Stop
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="btn-send"
|
||||
:disabled="!messageInput.trim()"
|
||||
@click="sendMessage"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Add CSS for the listen button**
|
||||
|
||||
In the `<style>` block, add:
|
||||
|
||||
```css
|
||||
.btn-listen-ws {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, background 0.15s, border-color 0.15s;
|
||||
}
|
||||
.btn-listen-ws:hover {
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.btn-listen-ws--active {
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||
}
|
||||
.btn-listen-ws--busy {
|
||||
color: var(--color-primary);
|
||||
animation: pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 4: TypeScript check**
|
||||
|
||||
```bash
|
||||
cd /home/bvandeusen/Nextcloud/Projects/fabledassistant/frontend
|
||||
npx vue-tsc --noEmit 2>&1 | head -40
|
||||
```
|
||||
|
||||
Expected: no errors.
|
||||
|
||||
- [ ] **Step 5: Commit**
|
||||
|
||||
```bash
|
||||
git add frontend/src/views/WorkspaceView.vue
|
||||
git commit -m "feat(tts): add streaming TTS listen mode to WorkspaceView"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 5: Final integration check and push
|
||||
|
||||
- [ ] **Step 1: Full TypeScript check**
|
||||
|
||||
```bash
|
||||
cd /home/bvandeusen/Nextcloud/Projects/fabledassistant/frontend
|
||||
npx vue-tsc --noEmit 2>&1
|
||||
```
|
||||
|
||||
Expected: zero errors.
|
||||
|
||||
- [ ] **Step 2: Verify no dead imports remain**
|
||||
|
||||
```bash
|
||||
grep -n "synthesiseSpeech\|speakLastAssistantMessage\|speakText\|listenToLatest\|synthesising" \
|
||||
frontend/src/views/ChatView.vue \
|
||||
frontend/src/views/BriefingView.vue \
|
||||
frontend/src/views/WorkspaceView.vue
|
||||
```
|
||||
|
||||
Expected: no matches (all replaced).
|
||||
|
||||
- [ ] **Step 3: Manual smoke test**
|
||||
|
||||
1. Enable voice in Admin → Config
|
||||
2. Open Chat, enable listen mode (speaker icon)
|
||||
3. Send a message and watch: audio should begin playing the first sentence while the LLM is still streaming the response
|
||||
4. Send another message mid-playback — previous audio should stop immediately
|
||||
5. Toggle listen mode off mid-response — audio stops, `tts.stop()` called
|
||||
6. Repeat in `/briefing` and `/workspace/:id`
|
||||
|
||||
- [ ] **Step 4: Push**
|
||||
|
||||
```bash
|
||||
git push origin dev
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Self-Review
|
||||
|
||||
**Spec coverage check:**
|
||||
- ✅ Starts playing during generation (sentence-level queue, fires on each boundary)
|
||||
- ✅ Automatic when listen mode on (enabled computed = listenMode && voiceTtsEnabled)
|
||||
- ✅ ChatView updated
|
||||
- ✅ BriefingView updated
|
||||
- ✅ WorkspaceView added
|
||||
- ✅ One retry before skipping on failure
|
||||
- ✅ Failures logged via `console.warn` with sentence text and error
|
||||
- ✅ `stop()` on new message start (watch streaming → true)
|
||||
- ✅ Flush remaining buffer on stream end (watch streaming → false)
|
||||
- ✅ Fragments < 3 chars skipped
|
||||
- ✅ `abortId` prevents stale playback after stop
|
||||
|
||||
**Type consistency:**
|
||||
- `tts.speaking` is `ComputedRef<boolean>` — accessed as `tts.speaking.value` in templates ✅
|
||||
- `tts.stop()` called consistently across all three views ✅
|
||||
- `useStreamingTts` options match usage in all three call sites ✅
|
||||
- `audio` variable kept in ChatView (used by volume slider) — not removed ✅
|
||||
@@ -0,0 +1,695 @@
|
||||
# Article Reading 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:** Add a `read_article` tool so the LLM can fetch any URL, fix the history builder so tool context survives follow-up turns, redesign the Discuss button to inject article content as a persisted tool exchange, and remove the RSS content character cap.
|
||||
|
||||
**Architecture:** Four independent changes executed in dependency order: (1) content cap removal, (2) `read_article` tool, (3) history builder fix (prerequisite for everything persisting across follow-ups), (4) Discuss endpoint + frontend. Each task is independently committable.
|
||||
|
||||
**Tech Stack:** Python/Quart, SQLAlchemy async, trafilatura (already installed), httpx (already installed), Vue 3 + TypeScript frontend.
|
||||
|
||||
---
|
||||
|
||||
## File map
|
||||
|
||||
| Action | Path | Responsibility |
|
||||
|---|---|---|
|
||||
| Modify | `src/fabledassistant/services/rss.py` | Remove `CONTENT_MAX_CHARS` truncation |
|
||||
| Modify | `src/fabledassistant/services/tools.py` | Add `_URL_TOOLS` list, add `read_article` to `get_tools_for_user`, add handler in `execute_tool` |
|
||||
| Modify | `src/fabledassistant/routes/chat.py` | Fix history builder to replay tool_calls |
|
||||
| Modify | `src/fabledassistant/services/chat.py` | Add `tool_calls` parameter to `add_message` |
|
||||
| Modify | `src/fabledassistant/routes/briefing.py` | Add `POST /api/briefing/articles/<item_id>/discuss` endpoint |
|
||||
| Modify | `frontend/src/views/BriefingView.vue` | Replace `discussArticle()` to call new endpoint |
|
||||
| Modify | `tests/test_rss_service.py` | Update truncation test, add no-truncation test |
|
||||
| Create | `tests/test_article_reading.py` | Tests for `read_article` tool and history builder |
|
||||
|
||||
---
|
||||
|
||||
## Task 1: Remove RSS content cap
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/fabledassistant/services/rss.py:17-18,83,213`
|
||||
- Modify: `tests/test_rss_service.py:19-26`
|
||||
|
||||
The `CONTENT_MAX_CHARS = 50_000` constant and all uses of `[:CONTENT_MAX_CHARS]` are removed.
|
||||
Trafilatura extracts only article body text, so content is naturally bounded.
|
||||
|
||||
- [ ] **Step 1: Update the truncation test to assert no truncation**
|
||||
|
||||
In `tests/test_rss_service.py`, replace the existing `test_extract_item_truncates_content` test:
|
||||
|
||||
```python
|
||||
def test_extract_item_does_not_truncate_content():
|
||||
"""extract_item() should store content without truncation."""
|
||||
from fabledassistant.services.rss import extract_item
|
||||
long_text = "x" * 100_000
|
||||
entry = MagicMock()
|
||||
entry.get = lambda k, d="": {"summary": long_text, "title": "", "link": "", "id": "g"}.get(k, d)
|
||||
entry.content = []
|
||||
entry.published_parsed = None
|
||||
item = extract_item(entry)
|
||||
assert len(item["content"]) == 100_000
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run the test to confirm it fails**
|
||||
|
||||
```bash
|
||||
cd /home/bvandeusen/Nextcloud/Projects/fabledassistant
|
||||
make test ARGS="tests/test_rss_service.py::test_extract_item_does_not_truncate_content -v"
|
||||
```
|
||||
|
||||
Expected: FAIL (current code truncates to 50_000).
|
||||
|
||||
- [ ] **Step 3: Remove CONTENT_MAX_CHARS from rss.py**
|
||||
|
||||
In `src/fabledassistant/services/rss.py`:
|
||||
|
||||
Remove lines 17–18:
|
||||
```python
|
||||
# Safety cap on stored content — effectively unlimited for typical articles
|
||||
CONTENT_MAX_CHARS = 50_000
|
||||
```
|
||||
|
||||
Change line 83 from:
|
||||
```python
|
||||
content = _html_to_text(content)[:CONTENT_MAX_CHARS]
|
||||
```
|
||||
to:
|
||||
```python
|
||||
content = _html_to_text(content)
|
||||
```
|
||||
|
||||
Change line 213 from:
|
||||
```python
|
||||
item.content = full_text[:CONTENT_MAX_CHARS]
|
||||
```
|
||||
to:
|
||||
```python
|
||||
item.content = full_text
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Run all rss tests**
|
||||
|
||||
```bash
|
||||
make test ARGS="tests/test_rss_service.py -v"
|
||||
```
|
||||
|
||||
Expected: all pass. The `test_extract_item_truncates_content` test name no longer exists (replaced in Step 1).
|
||||
|
||||
- [ ] **Step 5: Commit**
|
||||
|
||||
```bash
|
||||
git add src/fabledassistant/services/rss.py tests/test_rss_service.py
|
||||
git commit -m "feat(rss): remove article content character cap"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 2: Add `read_article` tool
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/fabledassistant/services/tools.py`
|
||||
- Create: `tests/test_article_reading.py`
|
||||
|
||||
The tool uses `_fetch_full_article` from `rss.py` (lazy import inside `execute_tool` to avoid circular dependencies). Added unconditionally to all users via a new `_URL_TOOLS` list.
|
||||
|
||||
- [ ] **Step 1: Write failing tests**
|
||||
|
||||
Create `tests/test_article_reading.py`:
|
||||
|
||||
```python
|
||||
import json
|
||||
import pytest
|
||||
from unittest.mock import AsyncMock, patch
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_read_article_success():
|
||||
"""read_article tool returns article content on success."""
|
||||
from fabledassistant.services.tools import execute_tool
|
||||
with patch(
|
||||
"fabledassistant.services.rss._fetch_full_article",
|
||||
new=AsyncMock(return_value="Article text here."),
|
||||
):
|
||||
result = await execute_tool(
|
||||
user_id=1,
|
||||
tool_name="read_article",
|
||||
arguments={"url": "https://example.com/article"},
|
||||
)
|
||||
assert result["success"] is True
|
||||
assert result["type"] == "article_content"
|
||||
assert result["url"] == "https://example.com/article"
|
||||
assert result["content"] == "Article text here."
|
||||
assert result["truncated"] is False
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_read_article_fetch_failure():
|
||||
"""read_article tool returns success=False when fetch returns None."""
|
||||
from fabledassistant.services.tools import execute_tool
|
||||
with patch(
|
||||
"fabledassistant.services.rss._fetch_full_article",
|
||||
new=AsyncMock(return_value=None),
|
||||
):
|
||||
result = await execute_tool(
|
||||
user_id=1,
|
||||
tool_name="read_article",
|
||||
arguments={"url": "https://example.com/bad"},
|
||||
)
|
||||
assert result["success"] is False
|
||||
assert "Could not fetch" in result["error"]
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_read_article_truncates_at_40k():
|
||||
"""read_article tool truncates content at 40_000 chars and sets truncated=True."""
|
||||
from fabledassistant.services.tools import execute_tool
|
||||
long_content = "x" * 50_000
|
||||
with patch(
|
||||
"fabledassistant.services.rss._fetch_full_article",
|
||||
new=AsyncMock(return_value=long_content),
|
||||
):
|
||||
result = await execute_tool(
|
||||
user_id=1,
|
||||
tool_name="read_article",
|
||||
arguments={"url": "https://example.com/long"},
|
||||
)
|
||||
assert result["success"] is True
|
||||
assert len(result["content"]) == 40_000
|
||||
assert result["truncated"] is True
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_read_article_empty_url():
|
||||
"""read_article tool returns success=False when url is empty."""
|
||||
from fabledassistant.services.tools import execute_tool
|
||||
result = await execute_tool(
|
||||
user_id=1,
|
||||
tool_name="read_article",
|
||||
arguments={"url": ""},
|
||||
)
|
||||
assert result["success"] is False
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run tests to confirm they fail**
|
||||
|
||||
```bash
|
||||
make test ARGS="tests/test_article_reading.py -v"
|
||||
```
|
||||
|
||||
Expected: all 4 fail with "read_article not handled" or AttributeError.
|
||||
|
||||
- [ ] **Step 3: Add `_URL_TOOLS` list and register it in `get_tools_for_user`**
|
||||
|
||||
In `src/fabledassistant/services/tools.py`, add the `_URL_TOOLS` list immediately after the `_SEARCH_TOOLS` block (around line 836):
|
||||
|
||||
```python
|
||||
_URL_TOOLS = [
|
||||
{
|
||||
"type": "function",
|
||||
"function": {
|
||||
"name": "read_article",
|
||||
"description": (
|
||||
"Fetch and read the full text of a web page or article from a URL. "
|
||||
"Use when the user shares a URL and wants you to read it, or to get "
|
||||
"the full content of a linked page. "
|
||||
"Do NOT use search_web for URLs — use this tool instead."
|
||||
),
|
||||
"parameters": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"url": {"type": "string", "description": "The URL to fetch and read"}
|
||||
},
|
||||
"required": ["url"],
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
In `get_tools_for_user` (around line 1034), add `_URL_TOOLS` unconditionally after `_CORE_TOOLS`:
|
||||
|
||||
```python
|
||||
async def get_tools_for_user(user_id: int) -> list[dict]:
|
||||
"""Build the tool list for a user based on their configured integrations."""
|
||||
tools = list(_CORE_TOOLS)
|
||||
tools.extend(_URL_TOOLS)
|
||||
tools.extend(_RAG_TOOLS)
|
||||
tools.extend(_ENTITY_TOOLS)
|
||||
if await is_caldav_configured(user_id):
|
||||
tools.extend(_CALDAV_TOOLS)
|
||||
if Config.searxng_enabled():
|
||||
tools.extend(_SEARCH_TOOLS)
|
||||
tools.extend(_RESEARCH_TOOLS)
|
||||
tools.extend(_IMAGE_TOOLS)
|
||||
logger.debug("User %d: %d tools available", user_id, len(tools))
|
||||
return tools
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Add `read_article` handler in `execute_tool`**
|
||||
|
||||
In `src/fabledassistant/services/tools.py`, in the `execute_tool` function, find the `elif tool_name == "search_web":` block (around line 1771). Add the new handler immediately before it:
|
||||
|
||||
```python
|
||||
elif tool_name == "read_article":
|
||||
from fabledassistant.services.rss import _fetch_full_article
|
||||
url = arguments.get("url", "").strip()
|
||||
if not url:
|
||||
return {"success": False, "error": "No URL provided"}
|
||||
content = await _fetch_full_article(url)
|
||||
if not content:
|
||||
return {"success": False, "error": f"Could not fetch article content from {url}"}
|
||||
_TOOL_CONTENT_CAP = 40_000
|
||||
truncated = len(content) > _TOOL_CONTENT_CAP
|
||||
return {
|
||||
"success": True,
|
||||
"type": "article_content",
|
||||
"url": url,
|
||||
"content": content[:_TOOL_CONTENT_CAP],
|
||||
"truncated": truncated,
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
- [ ] **Step 5: Run the tests**
|
||||
|
||||
```bash
|
||||
make test ARGS="tests/test_article_reading.py -v"
|
||||
```
|
||||
|
||||
Expected: all 4 pass.
|
||||
|
||||
- [ ] **Step 6: Run full test suite**
|
||||
|
||||
```bash
|
||||
make test
|
||||
```
|
||||
|
||||
Expected: all pass.
|
||||
|
||||
- [ ] **Step 7: Commit**
|
||||
|
||||
```bash
|
||||
git add src/fabledassistant/services/tools.py tests/test_article_reading.py
|
||||
git commit -m "feat(tools): add read_article tool using trafilatura extraction"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 3: Fix history builder
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/fabledassistant/routes/chat.py:162-166`
|
||||
- Modify: `tests/test_article_reading.py` (add history builder tests)
|
||||
|
||||
The loop that builds `history` for `run_generation` currently drops `tool_calls`. This fix replays the full tool exchange so the LLM sees prior tool results on follow-up turns.
|
||||
|
||||
- [ ] **Step 1: Add history builder tests**
|
||||
|
||||
Append to `tests/test_article_reading.py`:
|
||||
|
||||
```python
|
||||
def test_history_builder_plain_messages():
|
||||
"""Messages without tool_calls are added as {role, content} unchanged."""
|
||||
import json
|
||||
messages = [
|
||||
type("M", (), {"role": "system", "content": "sys", "tool_calls": None})(),
|
||||
type("M", (), {"role": "user", "content": "hello", "tool_calls": None})(),
|
||||
type("M", (), {"role": "assistant", "content": "hi", "tool_calls": None})(),
|
||||
]
|
||||
history = _build_history(messages)
|
||||
assert history == [
|
||||
{"role": "user", "content": "hello"},
|
||||
{"role": "assistant", "content": "hi"},
|
||||
]
|
||||
|
||||
|
||||
def test_history_builder_with_tool_calls():
|
||||
"""Messages with tool_calls emit an assistant entry + tool result entries."""
|
||||
import json
|
||||
tool_calls_data = [
|
||||
{
|
||||
"function": "read_article",
|
||||
"arguments": {"url": "https://example.com"},
|
||||
"result": {"success": True, "content": "Article text"},
|
||||
}
|
||||
]
|
||||
messages = [
|
||||
type("M", (), {"role": "user", "content": "read this", "tool_calls": None})(),
|
||||
type("M", (), {
|
||||
"role": "assistant",
|
||||
"content": "",
|
||||
"tool_calls": tool_calls_data,
|
||||
})(),
|
||||
type("M", (), {"role": "user", "content": "follow up", "tool_calls": None})(),
|
||||
]
|
||||
history = _build_history(messages)
|
||||
assert history[0] == {"role": "user", "content": "read this"}
|
||||
assert history[1]["role"] == "assistant"
|
||||
assert history[1]["tool_calls"] == [
|
||||
{"function": {"name": "read_article", "arguments": {"url": "https://example.com"}}}
|
||||
]
|
||||
assert history[2] == {"role": "tool", "content": json.dumps({"success": True, "content": "Article text"})}
|
||||
assert history[3] == {"role": "user", "content": "follow up"}
|
||||
|
||||
|
||||
def _build_history(messages):
|
||||
"""Inline copy of the fixed history builder for testing."""
|
||||
import json
|
||||
history = []
|
||||
for msg in messages:
|
||||
if msg.role == "system":
|
||||
continue
|
||||
msg_dict = {"role": msg.role, "content": msg.content or ""}
|
||||
if msg.tool_calls:
|
||||
msg_dict["tool_calls"] = [
|
||||
{"function": {"name": tc["function"], "arguments": tc["arguments"]}}
|
||||
for tc in msg.tool_calls
|
||||
]
|
||||
history.append(msg_dict)
|
||||
for tc in msg.tool_calls:
|
||||
history.append({"role": "tool", "content": json.dumps(tc.get("result", {}))})
|
||||
else:
|
||||
history.append(msg_dict)
|
||||
return history
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run the tests to confirm they pass**
|
||||
|
||||
(These tests use `_build_history` defined inline — they test the logic directly, not the route. They should pass immediately.)
|
||||
|
||||
```bash
|
||||
make test ARGS="tests/test_article_reading.py::test_history_builder_plain_messages tests/test_article_reading.py::test_history_builder_with_tool_calls -v"
|
||||
```
|
||||
|
||||
Expected: both pass.
|
||||
|
||||
- [ ] **Step 3: Apply the fix to `chat.py`**
|
||||
|
||||
In `src/fabledassistant/routes/chat.py`, replace lines 162–166:
|
||||
|
||||
```python
|
||||
# Build history from existing messages (excluding system and the placeholder)
|
||||
history = []
|
||||
for msg in conv.messages:
|
||||
if msg.role != "system":
|
||||
history.append({"role": msg.role, "content": msg.content})
|
||||
```
|
||||
|
||||
with:
|
||||
|
||||
```python
|
||||
# Build history from existing messages (excluding system and the placeholder).
|
||||
# Tool calls from prior turns are replayed as assistant tool_call + tool result
|
||||
# messages so the LLM retains tool context on follow-up turns.
|
||||
history = []
|
||||
for msg in conv.messages:
|
||||
if msg.role == "system":
|
||||
continue
|
||||
msg_dict = {"role": msg.role, "content": msg.content or ""}
|
||||
if msg.tool_calls:
|
||||
msg_dict["tool_calls"] = [
|
||||
{"function": {"name": tc["function"], "arguments": tc["arguments"]}}
|
||||
for tc in msg.tool_calls
|
||||
]
|
||||
history.append(msg_dict)
|
||||
for tc in msg.tool_calls:
|
||||
history.append({"role": "tool", "content": json.dumps(tc.get("result", {}))})
|
||||
else:
|
||||
history.append(msg_dict)
|
||||
```
|
||||
|
||||
`json` is already imported at the top of `chat.py`.
|
||||
|
||||
- [ ] **Step 4: Run full test suite**
|
||||
|
||||
```bash
|
||||
make test
|
||||
```
|
||||
|
||||
Expected: all pass.
|
||||
|
||||
- [ ] **Step 5: Commit**
|
||||
|
||||
```bash
|
||||
git add src/fabledassistant/routes/chat.py tests/test_article_reading.py
|
||||
git commit -m "fix(chat): replay tool_calls in history so tool context survives follow-up turns"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 4: Extend `add_message` to accept `tool_calls`
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/fabledassistant/services/chat.py:183-207`
|
||||
|
||||
The Discuss endpoint (Task 5) needs to store a synthetic assistant message with `tool_calls`. The existing `add_message` doesn't support this parameter.
|
||||
|
||||
- [ ] **Step 1: Update `add_message` signature and body**
|
||||
|
||||
In `src/fabledassistant/services/chat.py`, replace the `add_message` function (lines 183–207):
|
||||
|
||||
```python
|
||||
async def add_message(
|
||||
conversation_id: int,
|
||||
role: str,
|
||||
content: str,
|
||||
context_note_id: int | None = None,
|
||||
status: str | None = None,
|
||||
tool_calls: list | None = None,
|
||||
) -> Message:
|
||||
async with async_session() as session:
|
||||
kwargs: dict = dict(
|
||||
conversation_id=conversation_id,
|
||||
role=role,
|
||||
content=content,
|
||||
context_note_id=context_note_id,
|
||||
)
|
||||
if status is not None:
|
||||
kwargs["status"] = status
|
||||
if tool_calls is not None:
|
||||
kwargs["tool_calls"] = tool_calls
|
||||
msg = Message(**kwargs)
|
||||
session.add(msg)
|
||||
# Touch conversation updated_at
|
||||
conv = await session.get(Conversation, conversation_id)
|
||||
if conv:
|
||||
conv.updated_at = datetime.now(timezone.utc)
|
||||
await session.commit()
|
||||
await session.refresh(msg)
|
||||
return msg
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run full test suite**
|
||||
|
||||
```bash
|
||||
make test
|
||||
```
|
||||
|
||||
Expected: all pass (existing callers only use positional/keyword args that are unchanged).
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/fabledassistant/services/chat.py
|
||||
git commit -m "feat(chat): add tool_calls parameter to add_message"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 5: Add Discuss endpoint and update frontend
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/fabledassistant/routes/briefing.py`
|
||||
- Modify: `frontend/src/views/BriefingView.vue`
|
||||
|
||||
New route: `POST /api/briefing/articles/<item_id>/discuss`. Fetches stored article from DB, stores a synthetic `read_article` tool exchange plus the user message, then triggers generation. Frontend replaces the inline-content approach with a call to this endpoint.
|
||||
|
||||
- [ ] **Step 1: Add the discuss endpoint to briefing.py**
|
||||
|
||||
At the top of `src/fabledassistant/routes/briefing.py`, add these imports (after the existing imports):
|
||||
|
||||
```python
|
||||
from fabledassistant.models.rss_feed import RssItem, RssFeed
|
||||
from fabledassistant.services.chat import add_message, get_conversation
|
||||
from fabledassistant.services.generation_buffer import GenerationState, create_buffer, get_buffer
|
||||
from fabledassistant.services.generation_task import run_generation
|
||||
from fabledassistant.services.settings import get_setting
|
||||
```
|
||||
|
||||
Note: `get_setting` and `asyncio` are already imported. Add only what is missing.
|
||||
|
||||
Then add the new route at the end of `briefing.py` (before any final lines), after the `list_news` route:
|
||||
|
||||
```python
|
||||
@briefing_bp.route("/articles/<int:item_id>/discuss", methods=["POST"])
|
||||
@_REQUIRE
|
||||
async def discuss_article(item_id: int):
|
||||
"""Pre-load a briefing article as a read_article tool exchange and trigger generation."""
|
||||
uid = g.user.id
|
||||
data = await request.get_json() or {}
|
||||
conv_id = data.get("conv_id")
|
||||
if not conv_id:
|
||||
return jsonify({"error": "conv_id is required"}), 400
|
||||
|
||||
# Verify article belongs to this user (via feed ownership)
|
||||
async with async_session() as session:
|
||||
result = await session.execute(
|
||||
select(RssItem).join(RssFeed, RssItem.feed_id == RssFeed.id)
|
||||
.where(RssItem.id == item_id, RssFeed.user_id == uid)
|
||||
)
|
||||
item = result.scalar_one_or_none()
|
||||
if item is None:
|
||||
return jsonify({"error": "Article not found"}), 404
|
||||
|
||||
# Verify conversation belongs to this user
|
||||
conv = await get_conversation(uid, conv_id)
|
||||
if conv is None:
|
||||
return jsonify({"error": "Conversation not found"}), 404
|
||||
|
||||
# Reject if generation already running
|
||||
existing = get_buffer(conv_id)
|
||||
if existing and existing.state == GenerationState.RUNNING:
|
||||
return jsonify({"error": "Generation already in progress"}), 409
|
||||
|
||||
article_content = item.content or ""
|
||||
|
||||
# Store synthetic assistant message: read_article was already called with stored content
|
||||
synthetic_tool_calls = [
|
||||
{
|
||||
"function": "read_article",
|
||||
"arguments": {"url": item.url},
|
||||
"result": {
|
||||
"success": True,
|
||||
"type": "article_content",
|
||||
"url": item.url,
|
||||
"content": article_content,
|
||||
"truncated": False,
|
||||
},
|
||||
}
|
||||
]
|
||||
await add_message(conv_id, "assistant", "", status="complete", tool_calls=synthetic_tool_calls)
|
||||
|
||||
# Store user message
|
||||
await add_message(conv_id, "user", "Please summarize and discuss this article.")
|
||||
|
||||
# Reload conversation so history includes the two new messages
|
||||
conv = await get_conversation(uid, conv_id)
|
||||
|
||||
# Build history (using the fixed builder from chat.py logic — duplicated here)
|
||||
history = []
|
||||
for msg in conv.messages:
|
||||
if msg.role == "system":
|
||||
continue
|
||||
msg_dict = {"role": msg.role, "content": msg.content or ""}
|
||||
if msg.tool_calls:
|
||||
msg_dict["tool_calls"] = [
|
||||
{"function": {"name": tc["function"], "arguments": tc["arguments"]}}
|
||||
for tc in msg.tool_calls
|
||||
]
|
||||
history.append(msg_dict)
|
||||
for tc in msg.tool_calls:
|
||||
history.append({"role": "tool", "content": json.dumps(tc.get("result", {}))})
|
||||
else:
|
||||
history.append(msg_dict)
|
||||
|
||||
model = await get_setting(uid, "default_model", "") or ""
|
||||
from fabledassistant.config import Config as _Config
|
||||
if not model:
|
||||
model = _Config.OLLAMA_MODEL
|
||||
|
||||
# Create placeholder assistant message and generation buffer
|
||||
assistant_msg = await add_message(conv_id, "assistant", "", status="generating")
|
||||
try:
|
||||
buf = create_buffer(conv_id, assistant_msg.id)
|
||||
except RuntimeError:
|
||||
return jsonify({"error": "Generation already in progress"}), 409
|
||||
|
||||
asyncio.create_task(run_generation(
|
||||
buf, history, model,
|
||||
uid, conv_id, conv.title,
|
||||
"Please summarize and discuss this article.",
|
||||
think=True,
|
||||
))
|
||||
|
||||
return jsonify({"assistant_message_id": assistant_msg.id, "status": "generating"}), 202
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run full test suite**
|
||||
|
||||
```bash
|
||||
make test
|
||||
```
|
||||
|
||||
Expected: all pass.
|
||||
|
||||
- [ ] **Step 3: Update `discussArticle` in BriefingView.vue**
|
||||
|
||||
In `frontend/src/views/BriefingView.vue`, replace the `discussArticle` function:
|
||||
|
||||
```typescript
|
||||
async function discussArticle(item: NewsItem) {
|
||||
if (!todayConvId.value || chatStore.streaming) return
|
||||
if (!isToday.value) selectedConvId.value = todayConvId.value
|
||||
await nextTick(() => {
|
||||
document.querySelector('.briefing-center')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
|
||||
})
|
||||
try {
|
||||
await apiPost<{ assistant_message_id: number }>(
|
||||
`/api/briefing/articles/${item.id}/discuss`,
|
||||
{ conv_id: todayConvId.value },
|
||||
)
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
// Reload conversation so the new messages appear (including the generating placeholder),
|
||||
// then reconnect to the SSE stream using the existing reconnectIfGenerating helper.
|
||||
await chatStore.fetchConversation(todayConvId.value)
|
||||
await chatStore.reconnectIfGenerating(todayConvId.value)
|
||||
}
|
||||
```
|
||||
|
||||
`reconnectIfGenerating` is already exported from `useChatStore`. It finds the assistant message in `status="generating"` state and connects to the SSE stream automatically. No changes to `chat.ts` are needed.
|
||||
|
||||
- [ ] **Step 4: TypeScript check**
|
||||
|
||||
```bash
|
||||
cd /home/bvandeusen/Nextcloud/Projects/fabledassistant
|
||||
npm --prefix frontend run type-check
|
||||
```
|
||||
|
||||
Expected: no errors.
|
||||
|
||||
- [ ] **Step 5: Commit**
|
||||
|
||||
```bash
|
||||
git add src/fabledassistant/routes/briefing.py frontend/src/views/BriefingView.vue frontend/src/stores/chat.ts
|
||||
git commit -m "feat(briefing): add discuss endpoint and update frontend to use persisted article context"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 6: Final verification
|
||||
|
||||
- [ ] **Step 1: Run full test suite**
|
||||
|
||||
```bash
|
||||
cd /home/bvandeusen/Nextcloud/Projects/fabledassistant
|
||||
make test
|
||||
```
|
||||
|
||||
Expected: all tests pass.
|
||||
|
||||
- [ ] **Step 2: TypeScript check**
|
||||
|
||||
```bash
|
||||
npm --prefix frontend run type-check
|
||||
```
|
||||
|
||||
Expected: no errors.
|
||||
|
||||
- [ ] **Step 3: Push**
|
||||
|
||||
```bash
|
||||
git push origin dev
|
||||
```
|
||||
@@ -0,0 +1,479 @@
|
||||
# Web Voice Overlay Polish — 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:** Ship the dormant `VoiceOverlay` component by mounting it in `App.vue`, wiring the Space bar shortcut, and replacing push-to-talk with click-to-toggle silence detection backed by a new `useSilenceDetector` composable.
|
||||
|
||||
**Architecture:** A new `useSilenceDetector` composable uses `AudioContext` + `AnalyserNode` to monitor amplitude from a live `MediaStream` and fires a callback after sustained silence. `VoiceOverlay` coordinates recording and silence detection, switching from hold-to-record to click-to-toggle. `App.vue` mounts the overlay and adds a Space bar handler that dispatches the existing `voice:ptt-toggle` custom event.
|
||||
|
||||
**Tech Stack:** Vue 3 Composition API, TypeScript, Web Audio API (`AudioContext`, `AnalyserNode`), existing `useVoiceRecorder` / `useVoiceAudio` composables.
|
||||
|
||||
---
|
||||
|
||||
## File Map
|
||||
|
||||
| Action | Path |
|
||||
|--------|------|
|
||||
| Create | `frontend/src/composables/useSilenceDetector.ts` |
|
||||
| Modify | `frontend/src/composables/useVoiceRecorder.ts` |
|
||||
| Modify | `frontend/src/components/VoiceOverlay.vue` |
|
||||
| Modify | `frontend/src/App.vue` |
|
||||
|
||||
---
|
||||
|
||||
### Task 1: `useSilenceDetector` composable
|
||||
|
||||
**Files:**
|
||||
- Create: `frontend/src/composables/useSilenceDetector.ts`
|
||||
|
||||
**Context:** The Web Audio API lets us pipe a `MediaStream` into an `AnalyserNode` and read frequency data as a byte array every 100 ms. RMS amplitude of that array gives a 0–1 loudness value; converting to dB lets us use the same `-40 dB` threshold as the Android app. The composable must be safe to call `stop()` on multiple times and must reset amplitude to 0 after stopping so the animated bars collapse.
|
||||
|
||||
- [ ] **Step 1: Create the file with full implementation**
|
||||
|
||||
`frontend/src/composables/useSilenceDetector.ts`:
|
||||
|
||||
```ts
|
||||
import { ref, readonly } from 'vue'
|
||||
|
||||
export interface SilenceDetectorOptions {
|
||||
thresholdDb?: number // default -40
|
||||
silenceDurationMs?: number // default 1500
|
||||
minRecordingMs?: number // default 500
|
||||
}
|
||||
|
||||
export function useSilenceDetector(options: SilenceDetectorOptions = {}) {
|
||||
const {
|
||||
thresholdDb = -40,
|
||||
silenceDurationMs = 1500,
|
||||
minRecordingMs = 500,
|
||||
} = options
|
||||
|
||||
const amplitude = ref(0)
|
||||
let audioCtx: AudioContext | null = null
|
||||
let intervalId: ReturnType<typeof setInterval> | null = null
|
||||
let silenceMs = 0
|
||||
let startedAt = 0
|
||||
|
||||
function start(stream: MediaStream, onSilence: () => void): void {
|
||||
stop()
|
||||
audioCtx = new AudioContext()
|
||||
const source = audioCtx.createMediaStreamSource(stream)
|
||||
const analyser = audioCtx.createAnalyser()
|
||||
analyser.fftSize = 256
|
||||
source.connect(analyser)
|
||||
|
||||
const data = new Uint8Array(analyser.frequencyBinCount)
|
||||
silenceMs = 0
|
||||
startedAt = Date.now()
|
||||
|
||||
intervalId = setInterval(() => {
|
||||
analyser.getByteFrequencyData(data)
|
||||
const rms = Math.sqrt(data.reduce((s, v) => s + v * v, 0) / data.length) / 255
|
||||
amplitude.value = rms
|
||||
|
||||
const db = rms > 0 ? 20 * Math.log10(rms) : -100
|
||||
if (db < thresholdDb) {
|
||||
silenceMs += 100
|
||||
if (silenceMs >= silenceDurationMs && Date.now() - startedAt >= minRecordingMs) {
|
||||
stop()
|
||||
onSilence()
|
||||
}
|
||||
} else {
|
||||
silenceMs = 0
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function stop(): void {
|
||||
if (intervalId !== null) {
|
||||
clearInterval(intervalId)
|
||||
intervalId = null
|
||||
}
|
||||
if (audioCtx) {
|
||||
audioCtx.close().catch(() => {})
|
||||
audioCtx = null
|
||||
}
|
||||
amplitude.value = 0
|
||||
silenceMs = 0
|
||||
}
|
||||
|
||||
return { amplitude: readonly(amplitude), start, stop }
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify TypeScript compiles**
|
||||
|
||||
```bash
|
||||
cd /path/to/fabledassistant/frontend
|
||||
npx tsc --noEmit
|
||||
```
|
||||
|
||||
Expected: no errors.
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add frontend/src/composables/useSilenceDetector.ts
|
||||
git commit -m "feat: add useSilenceDetector composable with Web Audio API amplitude monitoring"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 2: Expose `stream` ref from `useVoiceRecorder`
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/src/composables/useVoiceRecorder.ts`
|
||||
|
||||
**Context:** Currently `stream` is a plain `let` variable inside the closure. `VoiceOverlay` needs to pass the live `MediaStream` to `useSilenceDetector.start()` after recording begins. Exposing it as a readonly `Ref<MediaStream | null>` is the minimal change — no other callers are broken because they don't currently read `stream` from the return value.
|
||||
|
||||
The current file is at `frontend/src/composables/useVoiceRecorder.ts`. Read it before editing — the key lines to change are:
|
||||
|
||||
1. Top of function body: `let stream: MediaStream | null = null` → `const streamRef = ref<MediaStream | null>(null)`
|
||||
2. In `startRecording()`: `stream = await navigator.mediaDevices.getUserMedia({ audio: true })` → `streamRef.value = await navigator.mediaDevices.getUserMedia({ audio: true })`
|
||||
3. In `startRecording()` catch block: `stream = null` if present — replace with `streamRef.value = null` (if the catch sets stream to null; if not, skip)
|
||||
4. In `mediaRecorder.onstop`: `stream?.getTracks().forEach((t) => t.stop())` → `streamRef.value?.getTracks().forEach((t) => t.stop())` then `streamRef.value = null`
|
||||
5. Return object: add `stream: readonly(streamRef)`
|
||||
|
||||
- [ ] **Step 1: Add the `ref` import if not already present**
|
||||
|
||||
The file already imports `{ ref, readonly }` from `'vue'` — confirm this. If `ref` is missing from the import, add it.
|
||||
|
||||
- [ ] **Step 2: Replace the `stream` variable declaration**
|
||||
|
||||
Find:
|
||||
```ts
|
||||
let stream: MediaStream | null = null
|
||||
```
|
||||
Replace with:
|
||||
```ts
|
||||
const streamRef = ref<MediaStream | null>(null)
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Update all usages of `stream` in `startRecording`**
|
||||
|
||||
Find:
|
||||
```ts
|
||||
stream = await navigator.mediaDevices.getUserMedia({ audio: true })
|
||||
```
|
||||
Replace with:
|
||||
```ts
|
||||
streamRef.value = await navigator.mediaDevices.getUserMedia({ audio: true })
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Update `onstop` handler**
|
||||
|
||||
Find:
|
||||
```ts
|
||||
stream?.getTracks().forEach((t) => t.stop())
|
||||
stream = null
|
||||
```
|
||||
Replace with:
|
||||
```ts
|
||||
streamRef.value?.getTracks().forEach((t) => t.stop())
|
||||
streamRef.value = null
|
||||
```
|
||||
|
||||
- [ ] **Step 5: Add `stream` to the return object**
|
||||
|
||||
Find the return statement and add `stream: readonly(streamRef)`:
|
||||
```ts
|
||||
return {
|
||||
recording: readonly(recording),
|
||||
error: readonly(error),
|
||||
isSupported,
|
||||
startRecording,
|
||||
stopRecording,
|
||||
stream: readonly(streamRef),
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 6: Verify TypeScript compiles**
|
||||
|
||||
```bash
|
||||
npx tsc --noEmit
|
||||
```
|
||||
|
||||
Expected: no errors.
|
||||
|
||||
- [ ] **Step 7: Commit**
|
||||
|
||||
```bash
|
||||
git add frontend/src/composables/useVoiceRecorder.ts
|
||||
git commit -m "feat: expose live stream ref from useVoiceRecorder"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 3: Update `VoiceOverlay` — silence detection, click-to-toggle, amplitude bars
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/src/components/VoiceOverlay.vue`
|
||||
|
||||
**Context:** `VoiceOverlay.vue` is a complete floating voice UI that was never mounted. It currently uses `@mousedown`/`@mouseup` for push-to-talk. This task switches it to click-to-toggle with automatic silence detection and adds animated amplitude bars during recording. Read the full file before making changes — the existing structure and style blocks must be preserved.
|
||||
|
||||
#### Script changes
|
||||
|
||||
- [ ] **Step 1: Import `useSilenceDetector`**
|
||||
|
||||
At the top of `<script setup>`, after the existing imports, add:
|
||||
```ts
|
||||
import { useSilenceDetector } from '@/composables/useSilenceDetector'
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Instantiate the composable**
|
||||
|
||||
After `const audio = useVoiceAudio()`, add:
|
||||
```ts
|
||||
const silenceDetector = useSilenceDetector()
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Update `startPtt` to start silence detection**
|
||||
|
||||
Find the `startPtt` function. After `phase.value = 'recording'`, add:
|
||||
```ts
|
||||
if (recorder.stream.value) {
|
||||
silenceDetector.start(recorder.stream.value, stopPtt)
|
||||
}
|
||||
```
|
||||
|
||||
The complete `startPtt` after the change:
|
||||
```ts
|
||||
async function startPtt() {
|
||||
if (!voiceEnabled.value || isBusy.value) return
|
||||
audio.stop()
|
||||
errorMsg.value = ''
|
||||
open.value = true
|
||||
await recorder.startRecording()
|
||||
if (recorder.error.value) {
|
||||
phase.value = 'error'
|
||||
errorMsg.value = recorder.error.value
|
||||
return
|
||||
}
|
||||
phase.value = 'recording'
|
||||
if (recorder.stream.value) {
|
||||
silenceDetector.start(recorder.stream.value, stopPtt)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Update `stopPtt` to stop silence detection**
|
||||
|
||||
Add `silenceDetector.stop()` as the very first line of `stopPtt`:
|
||||
```ts
|
||||
async function stopPtt() {
|
||||
silenceDetector.stop()
|
||||
if (phase.value !== 'recording') return
|
||||
// ... rest unchanged
|
||||
```
|
||||
|
||||
- [ ] **Step 5: Update `cancelAll` to stop silence detection**
|
||||
|
||||
Add `silenceDetector.stop()` after `recorder.stopRecording().catch(() => {})`:
|
||||
```ts
|
||||
function cancelAll() {
|
||||
silenceDetector.stop()
|
||||
recorder.stopRecording().catch(() => {})
|
||||
audio.stop()
|
||||
phase.value = 'idle'
|
||||
streamContent.value = ''
|
||||
errorMsg.value = ''
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 6: Add `onBtnClick` function**
|
||||
|
||||
Add this function after `cancelAll`:
|
||||
```ts
|
||||
function onBtnClick() {
|
||||
if (phase.value === 'error') { phase.value = 'idle'; return }
|
||||
if (phase.value === 'recording') { stopPtt(); return }
|
||||
if (phase.value === 'idle') { startPtt() }
|
||||
}
|
||||
```
|
||||
|
||||
#### Template changes
|
||||
|
||||
- [ ] **Step 7: Replace PTT mouse/touch handlers with `@click`**
|
||||
|
||||
On `.voice-ptt-btn`, replace:
|
||||
```html
|
||||
@mousedown.prevent="startPtt"
|
||||
@mouseup.prevent="stopPtt"
|
||||
@touchstart.prevent="startPtt"
|
||||
@touchend.prevent="stopPtt"
|
||||
@click.prevent="phase === 'error' ? (phase = 'idle') : undefined"
|
||||
```
|
||||
with:
|
||||
```html
|
||||
@click.prevent="onBtnClick"
|
||||
```
|
||||
|
||||
- [ ] **Step 8: Update aria-label and title on the button**
|
||||
|
||||
Replace:
|
||||
```html
|
||||
:aria-label="phase === 'recording' ? 'Release to send' : 'Hold to speak'"
|
||||
:title="phase === 'recording' ? 'Release to send' : 'Hold Space or tap to speak'"
|
||||
```
|
||||
with:
|
||||
```html
|
||||
:aria-label="phase === 'recording' ? 'Click to stop' : 'Click to speak'"
|
||||
:title="phase === 'recording' ? 'Click to stop or wait for silence' : 'Click or press Space to speak'"
|
||||
```
|
||||
|
||||
- [ ] **Step 9: Replace the static recording icon with amplitude bars**
|
||||
|
||||
Find:
|
||||
```html
|
||||
<!-- Recording: waveform / stop icon -->
|
||||
<svg v-else-if="phase === 'recording'" width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
|
||||
</svg>
|
||||
```
|
||||
Replace with:
|
||||
```html
|
||||
<!-- Recording: amplitude bars -->
|
||||
<span v-else-if="phase === 'recording'" class="voice-amp-bars">
|
||||
<span
|
||||
v-for="n in 3"
|
||||
:key="n"
|
||||
class="voice-amp-bar"
|
||||
:style="{ transform: `scaleY(${0.3 + silenceDetector.amplitude.value * (0.4 + n * 0.15)})` }"
|
||||
></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
- [ ] **Step 10: Update the idle hint label**
|
||||
|
||||
Find:
|
||||
```html
|
||||
Hold <kbd>Space</kbd> or tap
|
||||
```
|
||||
Replace with:
|
||||
```html
|
||||
Tap or press <kbd>Space</kbd>
|
||||
```
|
||||
|
||||
#### Style changes
|
||||
|
||||
- [ ] **Step 11: Add amplitude bar styles to `<style scoped>`**
|
||||
|
||||
Append inside the `<style scoped>` block:
|
||||
```css
|
||||
/* ─── Amplitude bars (recording state) ──────────────────────────────────── */
|
||||
.voice-amp-bars {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
}
|
||||
.voice-amp-bar {
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
transform-origin: center;
|
||||
transition: transform 0.08s ease;
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 12: Verify TypeScript compiles**
|
||||
|
||||
```bash
|
||||
npx tsc --noEmit
|
||||
```
|
||||
|
||||
Expected: no errors.
|
||||
|
||||
- [ ] **Step 13: Commit**
|
||||
|
||||
```bash
|
||||
git add frontend/src/components/VoiceOverlay.vue
|
||||
git commit -m "feat: click-to-toggle silence detection and amplitude bars in VoiceOverlay"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 4: Mount `VoiceOverlay` and wire Space bar in `App.vue`
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/src/App.vue`
|
||||
|
||||
**Context:** `App.vue` has a full `onGlobalKeydown` handler and a shortcuts overlay. The Space bar is already documented there as "Hold to speak (voice, when enabled)" but the handler was never added to `onGlobalKeydown`. `VoiceOverlay` uses `Teleport to="body"` so it renders at the document root regardless of where it's placed in the template — just needs to be inside the authenticated block.
|
||||
|
||||
#### Script changes
|
||||
|
||||
- [ ] **Step 1: Add `VoiceOverlay` import**
|
||||
|
||||
In `<script setup>`, after the existing component imports (after `ToastNotification`), add:
|
||||
```ts
|
||||
import VoiceOverlay from '@/components/VoiceOverlay.vue'
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Add Space bar case to `onGlobalKeydown`**
|
||||
|
||||
The existing handler has a `switch (e.key)` block. The guard `if (isInputActive() || e.ctrlKey || e.metaKey || e.altKey) return` already runs before the switch, so the Space case only fires when the user isn't typing.
|
||||
|
||||
Inside the `switch (e.key)` block, add this case after the existing `'c'` case:
|
||||
```ts
|
||||
case ' ':
|
||||
e.preventDefault()
|
||||
document.dispatchEvent(new CustomEvent('voice:ptt-toggle'))
|
||||
break
|
||||
```
|
||||
|
||||
#### Template changes
|
||||
|
||||
- [ ] **Step 3: Mount `VoiceOverlay` in the authenticated template**
|
||||
|
||||
Find `<ToastNotification />` near the bottom of the authenticated template block and add `<VoiceOverlay />` directly above it:
|
||||
```html
|
||||
<VoiceOverlay />
|
||||
<ToastNotification />
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Update Space bar description in shortcuts panel**
|
||||
|
||||
Find:
|
||||
```html
|
||||
<span class="shortcut-desc">Hold to speak (voice, when enabled)</span>
|
||||
```
|
||||
Replace with:
|
||||
```html
|
||||
<span class="shortcut-desc">Tap to speak (voice, when enabled)</span>
|
||||
```
|
||||
|
||||
- [ ] **Step 5: Verify TypeScript compiles**
|
||||
|
||||
```bash
|
||||
npx tsc --noEmit
|
||||
```
|
||||
|
||||
Expected: no errors.
|
||||
|
||||
- [ ] **Step 6: Verify full build succeeds**
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
Expected: build completes with no errors.
|
||||
|
||||
- [ ] **Step 7: Manual smoke test**
|
||||
|
||||
1. Start the dev server: `npm run dev`
|
||||
2. Log in — confirm the floating mic button appears in the bottom-right corner
|
||||
3. Ensure voice is enabled in Settings → Voice
|
||||
4. Click the mic button — confirm it turns red with animated amplitude bars
|
||||
5. Speak — bars should animate with your voice
|
||||
6. Stop speaking — after ~1.5 s of silence, the button should switch to purple (transcribing), then green (speaking) as it plays back the response
|
||||
7. Click the mic while recording — confirm it stops immediately
|
||||
8. Press Space (not in an input field) — confirm it starts/stops recording
|
||||
9. Press Space in the chat input — confirm it does NOT trigger voice
|
||||
|
||||
- [ ] **Step 8: Commit**
|
||||
|
||||
```bash
|
||||
git add frontend/src/App.vue
|
||||
git commit -m "feat: mount VoiceOverlay and wire Space bar shortcut in App.vue"
|
||||
```
|
||||
@@ -0,0 +1,216 @@
|
||||
# ChatPanel Unification Design
|
||||
|
||||
**Date:** 2026-04-03
|
||||
|
||||
## Goal
|
||||
|
||||
Replace the four divergent chat surfaces (ChatView, BriefingView, WorkspaceView, HomeView widget) with a single `ChatPanel` component that encapsulates all chat behaviour — streaming, TTS, PTT, tool calls, thinking blocks, abort — so that fixes and features automatically apply to every context.
|
||||
|
||||
---
|
||||
|
||||
## Background
|
||||
|
||||
The app currently has four independent chat implementations that have drifted significantly:
|
||||
|
||||
| Surface | File | Gap |
|
||||
|---|---|---|
|
||||
| Main chat | `ChatView.vue` | Canonical reference |
|
||||
| Briefing | `BriefingView.vue` | Had separate TTS impl (now fixed), no PTT, streaming race bug |
|
||||
| Workspace | `WorkspaceView.vue` | TTS missing until recently, different input wiring |
|
||||
| Dashboard widget | `HomeView.vue` + `DashboardChatInput.vue` | Separate input component, response rendered manually in parent, no TTS, no PTT |
|
||||
|
||||
Every fix to chat has required touching 3–4 files. This design makes chat a first-class component.
|
||||
|
||||
---
|
||||
|
||||
## Architecture
|
||||
|
||||
### Component: `ChatPanel.vue`
|
||||
|
||||
A single Vue 3 component that owns the entire chat interaction loop for a given conversation context. Two variants controlled by a `variant` prop:
|
||||
|
||||
- **`full`** — full-height chat: message history, streaming bubble, input bar, all controls
|
||||
- **`widget`** — compact embedded chat: input bar + compact response area, no history scroll
|
||||
|
||||
Both variants share identical internals: same composables, same store reads, same TTS/PTT/abort logic.
|
||||
|
||||
### Extracted Sub-components
|
||||
|
||||
| Component | Responsibility |
|
||||
|---|---|
|
||||
| `ChatInputBar.vue` | Unified input bar: textarea, note picker, PTT mic, send button, abort button |
|
||||
| `ChatMessageList.vue` | Scrollable message history with auto-scroll, bulk-select (full variant only) |
|
||||
| `ChatStreamingBubble.vue` | Live streaming content display + thinking block |
|
||||
| `ChatToolCallList.vue` | Tool call cards, collapsed/expanded state |
|
||||
|
||||
### State Ownership
|
||||
|
||||
`ChatPanel` reads from `useChatStore` directly — it does not accept messages or streaming state as props. This mirrors how all current views work and avoids prop-drilling re-implementation.
|
||||
|
||||
The conversation being displayed is controlled via a `convId` prop. When `convId` is undefined, `ChatPanel` uses `chatStore.currentConversationId`. The parent view sets up the conversation (creates it if needed) and passes the ID down.
|
||||
|
||||
---
|
||||
|
||||
## Props & Emits Interface
|
||||
|
||||
```typescript
|
||||
interface ChatPanelProps {
|
||||
variant: 'full' | 'widget'
|
||||
convId?: number // which conversation to display; undefined = store current
|
||||
projectId?: number // workspace: pins RAG scope, passed to sendMessage
|
||||
briefingMode?: boolean // briefing: hides RAG scope chip, enables briefing-specific send path
|
||||
placeholder?: string // input placeholder text
|
||||
autoFocus?: boolean // focus input on mount
|
||||
}
|
||||
|
||||
interface ChatPanelEmits {
|
||||
// Emitted when a new conversation is started from the widget (so parent can track convId)
|
||||
(e: 'conversation-started', convId: number): void
|
||||
}
|
||||
```
|
||||
|
||||
All other behaviour (TTS, PTT, thinking, tool calls, streaming indicator, abort) is always on — not gated by props. The intentional differences between views are expressed only through the props above.
|
||||
|
||||
---
|
||||
|
||||
## Variant Behaviour
|
||||
|
||||
### `variant="full"` (ChatView, BriefingView, WorkspaceView)
|
||||
|
||||
Layout (top to bottom):
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ [RAG scope chip / briefing header] │ ← shown unless briefingMode or projectId set
|
||||
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
|
||||
│ ChatMessageList │
|
||||
│ user bubble │
|
||||
│ assistant bubble + tool calls │
|
||||
│ thinking block (always shown) │
|
||||
│ ... │
|
||||
│ ChatStreamingBubble (while streaming) │
|
||||
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
|
||||
│ ChatInputBar │
|
||||
│ [textarea] [note-picker] [mic] [▶] │
|
||||
│ [listen toggle] [abort] │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### `variant="widget"` (HomeView dashboard)
|
||||
|
||||
Layout (top to bottom, compact):
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ ChatInputBar (pill style) │
|
||||
│ [textarea] [mic] [▶] │
|
||||
├────────────────────────────────────────┤
|
||||
│ [query text] (after send) │
|
||||
│ [streaming / final response text] │
|
||||
│ [tool call chips] │
|
||||
│ [Continue in Chat →] │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
The widget variant does NOT show full message history. It shows only the most recent exchange. Once a new conversation is started or the user navigates to `/chat/:id`, the full history is available.
|
||||
|
||||
The `.dashboard-response` section currently in `HomeView.vue` moves inside `ChatPanel` and is rendered when `variant="widget"` and a conversation exists.
|
||||
|
||||
---
|
||||
|
||||
## TTS / PTT Wiring
|
||||
|
||||
`ChatPanel` instantiates `useStreamingTts` and `useListenMode` internally. These are not passed as props.
|
||||
|
||||
```typescript
|
||||
// Inside ChatPanel setup()
|
||||
const listenMode = useListenMode()
|
||||
const voiceTtsEnabled = computed(() => /* same check as current views */)
|
||||
const tts = useStreamingTts({
|
||||
streamingContent: computed(() => chatStore.streamingContent),
|
||||
streaming: computed(() => !!chatStore.streaming),
|
||||
enabled: computed(() => listenMode.value && voiceTtsEnabled.value),
|
||||
})
|
||||
```
|
||||
|
||||
PTT is handled inside `ChatInputBar` via the existing `useVoiceRecorder` composable (already used in `DashboardChatInput`). On recording stop, the transcribed text is placed in the textarea and auto-submitted.
|
||||
|
||||
---
|
||||
|
||||
## Per-View Migration
|
||||
|
||||
### ChatView → `<ChatPanel variant="full">`
|
||||
- Remove: all TTS/PTT/streaming/abort logic, scroll management, input bar template
|
||||
- Keep: route wiring, conversation list sidebar, bulk-delete UI (sidebar stays in ChatView)
|
||||
- ChatPanel replaces only the right-hand panel
|
||||
|
||||
### BriefingView → `<ChatPanel variant="full" briefingMode />`
|
||||
- Remove: streaming watch, TTS, manual scroll, input bar, response persistence workaround
|
||||
- Keep: history dropdown (today / past briefings), date header
|
||||
- `briefingMode` hides the RAG scope chip
|
||||
|
||||
### WorkspaceView → `<ChatPanel variant="full" :projectId="projectId">`
|
||||
- Remove: inline chat input, streaming watch, TTS wiring
|
||||
- Keep: 3-panel grid layout, task panel, note editor panel
|
||||
- ChatPanel takes the centre column
|
||||
|
||||
### HomeView → `<ChatPanel variant="widget">`
|
||||
- Remove: `DashboardChatInput` import + usage, `.dashboard-response` section, all manual store wiring (`dashboardConvId`, `dashboardQuery`, `dashboardFinalContent`, `dashboardFinalToolCalls`, `onChatSubmit`)
|
||||
- Keep: dashboard layout, projects/tasks/events sections
|
||||
- `DashboardChatInput.vue` deleted
|
||||
|
||||
---
|
||||
|
||||
## Data Flow
|
||||
|
||||
```
|
||||
Parent view
|
||||
└─ <ChatPanel :convId="convId" variant="full|widget">
|
||||
├─ reads: useChatStore (messages, streaming, streamingContent, currentConversation)
|
||||
├─ ChatMessageList — renders history from store
|
||||
├─ ChatStreamingBubble — renders chatStore.streamingContent while streaming
|
||||
├─ ChatToolCallList — renders tool calls from streaming + finalized messages
|
||||
├─ ChatInputBar
|
||||
│ ├─ usePtt (mic → textarea → auto-send)
|
||||
│ └─ emits: submit(content, contextNoteId)
|
||||
├─ useStreamingTts (sentence-chunk TTS during streaming)
|
||||
└─ useListenMode (shared global toggle)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Files Created / Modified
|
||||
|
||||
**Created:**
|
||||
- `frontend/src/components/ChatPanel.vue`
|
||||
- `frontend/src/components/ChatInputBar.vue`
|
||||
- `frontend/src/components/ChatMessageList.vue`
|
||||
- `frontend/src/components/ChatStreamingBubble.vue`
|
||||
- (no new composable needed — PTT uses existing `useVoiceRecorder.ts`)
|
||||
|
||||
**Modified:**
|
||||
- `frontend/src/views/ChatView.vue` — use ChatPanel for the chat area
|
||||
- `frontend/src/views/BriefingView.vue` — replace chat section with ChatPanel
|
||||
- `frontend/src/views/WorkspaceView.vue` — replace inline chat with ChatPanel
|
||||
- `frontend/src/views/HomeView.vue` — replace DashboardChatInput + response section with ChatPanel widget
|
||||
|
||||
**Deleted:**
|
||||
- `frontend/src/components/DashboardChatInput.vue`
|
||||
|
||||
---
|
||||
|
||||
## CSS / Styling
|
||||
|
||||
- `ChatPanel` carries its own scoped CSS for both variants
|
||||
- `ChatInputBar` replicates the pill style currently in `DashboardChatInput` and the flat style in `ChatView` — variant is controlled by a `pill` boolean prop (default false; widget sets it true)
|
||||
- All existing UI design language tokens (`--color-primary`, `--radius-lg`, Fraunces labels, gradient send button) are preserved
|
||||
|
||||
---
|
||||
|
||||
## What Does NOT Change
|
||||
|
||||
- Chat store (`useChatStore`) — unchanged
|
||||
- API client (`client.ts`) — unchanged
|
||||
- Backend routes — unchanged
|
||||
- WorkspaceTaskPanel and WorkspaceNoteEditor — unchanged
|
||||
- Briefing history dropdown and date header — unchanged
|
||||
- ChatView conversation sidebar and bulk-delete — unchanged
|
||||
- RAG scope chip logic — moved inside ChatPanel, behaviour identical
|
||||
@@ -0,0 +1,101 @@
|
||||
# Streaming TTS Design
|
||||
|
||||
**Date:** 2026-04-03
|
||||
**Status:** Approved
|
||||
|
||||
## Goal
|
||||
|
||||
Start playing TTS audio during LLM generation rather than waiting for the full response to finish. When listen mode is on, the first sentence plays as soon as Kokoro finishes synthesizing it — while the LLM is still streaming the rest of the response.
|
||||
|
||||
## Approach
|
||||
|
||||
Client-side sentence queuing composable. The frontend accumulates streaming tokens, detects sentence boundaries, fires per-sentence synthesis requests concurrently, and plays audio in strict insertion order. The existing `/api/voice/synthesise` backend endpoint is unchanged.
|
||||
|
||||
## Architecture
|
||||
|
||||
### `useStreamingTts` composable
|
||||
|
||||
**File:** `frontend/src/composables/useStreamingTts.ts`
|
||||
|
||||
**Inputs:**
|
||||
- `streamingContent: Ref<string>` — the growing accumulated response text (e.g. `store.streamingContent`)
|
||||
- `streaming: Ref<boolean>` — whether the LLM is currently generating
|
||||
- `enabled: Ref<boolean>` — `true` when listen mode is on AND TTS is available
|
||||
|
||||
**Exports:**
|
||||
- `speaking: Ref<boolean>` — `true` while any synthesis is in-flight or audio is playing
|
||||
- `stop()` — cancels all pending synthesis/playback and clears the queue
|
||||
|
||||
**Internal state:**
|
||||
- `sentenceBuffer: string` — accumulates characters since the last dispatched sentence
|
||||
- `lastSeenLength: number` — tracks how far into `streamingContent` we've processed
|
||||
- `abortId: number` — incremented on `stop()`; each queued promise checks the current id and bails if stale
|
||||
- `playQueue: Promise<void>` — a chained promise that serializes audio playback in insertion order
|
||||
|
||||
**Sentence detection:**
|
||||
- Regex: `/[.!?]+(?=\s|$)/` — handles `...`, `?!`, multi-punctuation
|
||||
- Triggered on every `streamingContent` change and on `streaming` flipping `false` (flush)
|
||||
- Fragments < 3 characters after markdown stripping are skipped
|
||||
|
||||
**Per-sentence pipeline:**
|
||||
1. Strip markdown (same logic as current `speakLastAssistantMessage`)
|
||||
2. Fire `synthesiseSpeech(sentence)` immediately — runs concurrently with other sentences
|
||||
3. On failure: one immediate retry. If retry also fails, skip silently and advance the queue
|
||||
4. Resolved blob is inserted into the playback queue at its original position
|
||||
5. Playback queue plays blobs strictly in insertion order via `useVoiceAudio`
|
||||
|
||||
**Stream-end flush:**
|
||||
- When `streaming` flips `false`, any remaining `sentenceBuffer` content (fragment without terminal punctuation) is dispatched as a final sentence — covers responses that end without a period
|
||||
|
||||
**Automatic reset:**
|
||||
- When `streaming` flips `true` (new message starting), `stop()` is called automatically to cancel any in-flight audio from the previous response before starting fresh
|
||||
|
||||
### Views updated
|
||||
|
||||
| View | Change |
|
||||
|------|--------|
|
||||
| `ChatView.vue` | Replace `speakLastAssistantMessage()` + `watch(streaming)` + `synthesising` ref with `useStreamingTts` |
|
||||
| `BriefingView.vue` | Replace `speakText()` + `watch(streaming)` + `synthesising` ref with `useStreamingTts` |
|
||||
| `WorkspaceView.vue` | Add listen mode toggle button (same UI pattern as ChatView) + `useStreamingTts` wired to workspace chat stream |
|
||||
|
||||
In all three views: the `speaking` export from `useStreamingTts` replaces the old `synthesising || audio.playing.value` checks for button busy state.
|
||||
|
||||
### Backend
|
||||
|
||||
No changes. `/api/voice/synthesise` accepts shorter sentence-length strings without issue.
|
||||
|
||||
## Error Handling
|
||||
|
||||
| Scenario | Behavior |
|
||||
|----------|----------|
|
||||
| Synthesis fails for a sentence | One immediate retry; if retry fails, sentence is skipped, queue advances, and a `console.warn` is emitted with the sentence index and error |
|
||||
| `stop()` called mid-queue | `abortId` incremented; all in-flight promises check id and discard their result |
|
||||
| New message starts while audio playing | `watch(streaming, true → ...)` calls `stop()` before starting new queue |
|
||||
| TTS unavailable or listen mode off | Composable is inert — watchers do nothing, no requests fired |
|
||||
| Fragment < 3 chars after stripping | Skipped without a TTS request |
|
||||
| Response ends without terminal punctuation | Remaining buffer flushed as final sentence on stream-end |
|
||||
|
||||
## Data Flow
|
||||
|
||||
```
|
||||
LLM SSE chunks → store.streamingContent (grows)
|
||||
↓
|
||||
useStreamingTts watcher
|
||||
↓
|
||||
sentenceBuffer accumulation
|
||||
↓
|
||||
sentence boundary detected? → synthesiseSpeech(sentence) [concurrent]
|
||||
↓ ↓ (fail → 1 retry → skip)
|
||||
playQueue.then(play blob) resolved blob
|
||||
↓
|
||||
useVoiceAudio.play() [sequential]
|
||||
↓
|
||||
audio output
|
||||
```
|
||||
|
||||
## Files Changed
|
||||
|
||||
- **New:** `frontend/src/composables/useStreamingTts.ts`
|
||||
- **Modified:** `frontend/src/views/ChatView.vue` — swap TTS logic for composable
|
||||
- **Modified:** `frontend/src/views/BriefingView.vue` — swap TTS logic for composable
|
||||
- **Modified:** `frontend/src/views/WorkspaceView.vue` — add listen mode + composable
|
||||
@@ -0,0 +1,227 @@
|
||||
# Article Reading Design
|
||||
|
||||
> **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:** Allow the LLM to fetch and read the full text of any URL on demand, fix conversation history so tool context survives follow-up turns, and make the briefing Discuss button inject article content as a persisted tool exchange rather than raw user-message text.
|
||||
|
||||
**Architecture:** Four self-contained changes — history reconstruction fix (prerequisite), `read_article` tool, Discuss endpoint, and content cap removal.
|
||||
|
||||
**Tech Stack:** Python/Quart backend, trafilatura (already installed), SQLAlchemy async, Vue 3 frontend.
|
||||
|
||||
---
|
||||
|
||||
## Problem summary
|
||||
|
||||
Three interrelated issues observed in briefing conversations:
|
||||
|
||||
1. **Missing `read_article` tool** — when a user pastes a URL, the LLM calls `search_web` (a SearXNG text search), which returns generic site descriptions instead of article content.
|
||||
2. **History reconstruction bug** — `routes/chat.py:166` builds the `history` list with only `role` + `content`, silently dropping all `tool_calls` and their results from prior turns. Tool context is lost on every follow-up.
|
||||
3. **Discuss button UX** — inlines raw article text into the user message bubble. Feels clumsy, and the model sometimes searches notes on follow-ups anyway because the article isn't clearly marked as "loaded" context.
|
||||
|
||||
---
|
||||
|
||||
## Components
|
||||
|
||||
### 1. History reconstruction fix
|
||||
**File:** `src/fabledassistant/routes/chat.py`
|
||||
|
||||
The loop at line ~164 that builds `history` must be updated to replay tool exchanges:
|
||||
|
||||
```python
|
||||
history = []
|
||||
for msg in conv.messages:
|
||||
if msg.role == "system":
|
||||
continue
|
||||
msg_dict = {"role": msg.role, "content": msg.content or ""}
|
||||
if msg.tool_calls:
|
||||
msg_dict["tool_calls"] = [
|
||||
{"function": {"name": tc["function"], "arguments": tc["arguments"]}}
|
||||
for tc in msg.tool_calls
|
||||
]
|
||||
history.append(msg_dict)
|
||||
for tc in msg.tool_calls:
|
||||
history.append({"role": "tool", "content": json.dumps(tc.get("result", {}))})
|
||||
else:
|
||||
history.append(msg_dict)
|
||||
```
|
||||
|
||||
The `tool_calls` JSONB column already stores `[{function, arguments, result}]` per call. No schema change needed.
|
||||
|
||||
### 2. `read_article` tool
|
||||
**Files:** `src/fabledassistant/services/research.py`, `src/fabledassistant/services/tools.py`, `src/fabledassistant/services/rss.py`
|
||||
|
||||
Move `_fetch_full_article` from `rss.py` to `research.py` (imported back into `rss.py` to avoid breaking existing calls). This makes it available to `execute_tool` without a circular import.
|
||||
|
||||
Tool definition added to `_TOOLS` in `tools.py`:
|
||||
|
||||
```python
|
||||
{
|
||||
"type": "function",
|
||||
"function": {
|
||||
"name": "read_article",
|
||||
"description": (
|
||||
"Fetch and read the full text of a web page or article from a URL. "
|
||||
"Use when the user shares a URL and wants you to read it, "
|
||||
"or to get the full content of a linked page. "
|
||||
"Do not use search_web for URLs — use this tool instead."
|
||||
),
|
||||
"parameters": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"url": {"type": "string", "description": "The URL to fetch"}
|
||||
},
|
||||
"required": ["url"],
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
`execute_tool` handler:
|
||||
|
||||
```python
|
||||
elif tool_name == "read_article":
|
||||
from fabledassistant.services.research import _fetch_full_article
|
||||
url = arguments.get("url", "").strip()
|
||||
if not url:
|
||||
return {"success": False, "error": "No URL provided"}
|
||||
content = await _fetch_full_article(url)
|
||||
if not content:
|
||||
return {"success": False, "error": f"Could not fetch article content from {url}"}
|
||||
TOOL_CONTENT_CAP = 40_000
|
||||
truncated = len(content) > TOOL_CONTENT_CAP
|
||||
return {
|
||||
"success": True,
|
||||
"type": "article_content",
|
||||
"url": url,
|
||||
"content": content[:TOOL_CONTENT_CAP],
|
||||
"truncated": truncated,
|
||||
}
|
||||
```
|
||||
|
||||
### 3. `add_message` — add `tool_calls` parameter
|
||||
**File:** `src/fabledassistant/services/chat.py`
|
||||
|
||||
`add_message` needs to accept and store `tool_calls` so the Discuss endpoint can create synthetic messages:
|
||||
|
||||
```python
|
||||
async def add_message(
|
||||
conversation_id: int,
|
||||
role: str,
|
||||
content: str,
|
||||
context_note_id: int | None = None,
|
||||
status: str | None = None,
|
||||
tool_calls: list | None = None,
|
||||
) -> Message:
|
||||
```
|
||||
|
||||
Set `msg.tool_calls = tool_calls` when provided.
|
||||
|
||||
### 4. Discuss endpoint
|
||||
**File:** `src/fabledassistant/routes/briefing.py`
|
||||
|
||||
New route: `POST /api/briefing/articles/<int:item_id>/discuss`
|
||||
|
||||
Request body: `{"conv_id": <int>}`
|
||||
|
||||
Steps:
|
||||
1. Look up `rss_items` row by `item_id` — verify it belongs to the user via feed ownership. Return 404 if not found.
|
||||
2. Look up conversation by `conv_id` — verify it belongs to the user. Return 404 if not found.
|
||||
3. If generation already running for `conv_id` → return 409.
|
||||
4. Fetch stored content: `article_content = item.content or item.snippet or ""`
|
||||
5. Store synthetic assistant message (status=`"complete"`, role=`"assistant"`, content=`""`, tool_calls as below):
|
||||
```python
|
||||
synthetic_tool_calls = [{
|
||||
"function": "read_article",
|
||||
"arguments": {"url": item.url},
|
||||
"result": {
|
||||
"success": True,
|
||||
"type": "article_content",
|
||||
"url": item.url,
|
||||
"content": article_content,
|
||||
"truncated": False,
|
||||
},
|
||||
}]
|
||||
await add_message(conv_id, "assistant", "", status="complete", tool_calls=synthetic_tool_calls)
|
||||
```
|
||||
6. Store user message: `await add_message(conv_id, "user", "Please summarize and discuss this article.")`
|
||||
7. Build `history` from `conv.messages` (using the fixed builder above).
|
||||
8. Create assistant placeholder, create buffer, launch `run_generation` as normal.
|
||||
9. Return `{"assistant_message_id": ..., "status": "generating"}` 202.
|
||||
|
||||
### 5. Frontend: BriefingView.vue
|
||||
**File:** `frontend/src/views/BriefingView.vue`
|
||||
|
||||
Replace `discussArticle()`:
|
||||
|
||||
```typescript
|
||||
async function discussArticle(item: NewsItem) {
|
||||
if (!todayConvId.value) return
|
||||
if (!isToday.value) selectedConvId.value = todayConvId.value
|
||||
await nextTick(() => {
|
||||
document.querySelector('.briefing-center')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
|
||||
})
|
||||
await apiClient.post(`/api/briefing/articles/${item.id}/discuss`, {
|
||||
conv_id: todayConvId.value,
|
||||
})
|
||||
// Re-fetch conversation so the new messages appear, then start SSE streaming.
|
||||
// The existing chatStore.fetchConversation + startStreaming pattern handles this.
|
||||
await chatStore.fetchConversation(todayConvId.value)
|
||||
chatStore.startStreaming(todayConvId.value)
|
||||
}
|
||||
```
|
||||
|
||||
The exact method names (`fetchConversation`, `startStreaming`) should match what `BriefingView.vue` already uses for the reply flow — confirm during implementation.
|
||||
|
||||
The article no longer appears as wall-of-text in the user bubble. The chat UI shows it as a `read_article` tool call card (already handled by `ToolCallCard.vue`).
|
||||
|
||||
### 6. Content cap removal
|
||||
**File:** `src/fabledassistant/services/rss.py`
|
||||
|
||||
Remove `[:CONTENT_MAX_CHARS]` from:
|
||||
- `content = _html_to_text(content)[:CONTENT_MAX_CHARS]` in `extract_item()`
|
||||
- `item.content = full_text[:CONTENT_MAX_CHARS]` in the enrichment task
|
||||
|
||||
The `CONTENT_MAX_CHARS` constant can be removed entirely. Trafilatura extracts only article body text (typically 2K–15K chars for news articles), so content is naturally bounded.
|
||||
|
||||
---
|
||||
|
||||
## Data flow
|
||||
|
||||
### User pastes a URL in chat
|
||||
1. User sends message with a URL
|
||||
2. LLM calls `read_article(url)`
|
||||
3. `execute_tool` calls `_fetch_full_article(url)` → trafilatura extracts clean text
|
||||
4. Tool result appended in-memory as `{role: "tool", content: json}`
|
||||
5. LLM responds based on article content
|
||||
6. Generation saves assistant message with `tool_calls=[{function:"read_article", arguments, result}]`
|
||||
7. Follow-up turns: history builder replays tool_call + tool result → article stays in context
|
||||
|
||||
### User clicks Discuss on a briefing article
|
||||
1. Frontend calls `POST /api/briefing/articles/{item_id}/discuss` with `{conv_id}`
|
||||
2. Backend fetches stored article text from DB (no network request)
|
||||
3. Backend stores synthetic assistant message with `read_article` tool result
|
||||
4. Backend stores user message `"Please summarize and discuss this article."`
|
||||
5. Generation runs — LLM sees pre-loaded article in history
|
||||
6. Follow-ups retain context via fixed history builder
|
||||
|
||||
---
|
||||
|
||||
## Error handling
|
||||
|
||||
| Scenario | Behaviour |
|
||||
|---|---|
|
||||
| `_fetch_full_article` returns `None` (network/extraction failure) | Tool returns `{success: False, error: "Could not fetch article content from [url]"}` — LLM reports conversationally |
|
||||
| Discuss: `item_id` not found or wrong user | 404 |
|
||||
| Discuss: `conv_id` not found or wrong user | 404 |
|
||||
| Discuss: article has no stored content | Falls back to empty string — LLM works with what it has |
|
||||
| Discuss: generation already running | 409 |
|
||||
| Messages with `tool_calls = None` | History builder unchanged — no regression for existing conversations |
|
||||
|
||||
---
|
||||
|
||||
## Tests
|
||||
|
||||
- **Unit:** `_fetch_full_article` returns `None` → `read_article` tool result has `success: False`
|
||||
- **Unit:** History builder with a stored message that has `tool_calls` → output includes assistant tool_call dict + a `{role: "tool"}` dict
|
||||
- **Unit:** History builder with messages where `tool_calls = None` → output unchanged from current behaviour
|
||||
- **Integration:** `POST /api/briefing/articles/{item_id}/discuss` → two messages stored (synthetic assistant + user message), generation triggered, returns 202
|
||||
@@ -0,0 +1,162 @@
|
||||
# Research Pipeline — Multi-Note Redesign
|
||||
|
||||
> **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:** Replace the single monolithic research note with a set of focused, topic-driven notes plus an index note that links them — making research output browsable, TTS-friendly, and well-organized.
|
||||
|
||||
**Architecture:** Two new LLM calls (outline generation + N parallel section syntheses) replace the single large synthesis call. Public API unchanged — callers receive the index note. Fallback to single-note behavior on any outline failure.
|
||||
|
||||
**Tech Stack:** Python/Quart backend, existing `research.py` service, asyncio.gather for parallelism.
|
||||
|
||||
---
|
||||
|
||||
## Problem
|
||||
|
||||
The current pipeline synthesizes one note with a minimum of 2500 words and 6 sections. This creates:
|
||||
- Notes too large to read or listen to comfortably
|
||||
- No way to navigate directly to a specific sub-topic
|
||||
- TTS failures on long prose (8000-char route limit, unbounded sentence buffers)
|
||||
|
||||
---
|
||||
|
||||
## Pipeline Flow
|
||||
|
||||
Public signature unchanged:
|
||||
```python
|
||||
async def run_research_pipeline(
|
||||
topic: str,
|
||||
user_id: int,
|
||||
model: str,
|
||||
buf=None,
|
||||
project_id: int | None = None,
|
||||
) -> Note: # returns the index note
|
||||
```
|
||||
|
||||
Execution order:
|
||||
|
||||
```
|
||||
1. Generate sub-queries (unchanged)
|
||||
2. Search + fetch sources (unchanged)
|
||||
3. Generate topic outline (NEW — one LLM call → 3–7 section dicts)
|
||||
4. Synthesize each section note (NEW — parallelized via asyncio.gather)
|
||||
5. Create all section notes in DB (sequential, tagged ["research"], same project_id)
|
||||
6. Create index note (NEW — links all sections)
|
||||
7. Return index note
|
||||
```
|
||||
|
||||
Status messages via `buf.append_event("status", ...)`:
|
||||
- `"Generating outline…"`
|
||||
- `"Writing: [Section Title]…"` (one per section, emitted before synthesis starts)
|
||||
- `"Saving [N] notes…"`
|
||||
|
||||
No note content is streamed into chat. After the tool call resolves, the LLM writes a brief conversational summary citing the index note title and section count.
|
||||
|
||||
---
|
||||
|
||||
## Outline Generation
|
||||
|
||||
New function: `_generate_outline(topic, sources, model) -> list[dict]`
|
||||
|
||||
Sends all fetched sources to the model with a prompt requesting a JSON array:
|
||||
|
||||
```json
|
||||
[
|
||||
{"title": "Quantum Entanglement: Mechanisms", "focus": "How entanglement works at the physical level"},
|
||||
{"title": "Quantum Computing Hardware", "focus": "Ion traps, superconducting qubits, photonic approaches"}
|
||||
]
|
||||
```
|
||||
|
||||
**Prompt requirements:**
|
||||
- Produce 3–7 sections covering distinct aspects of the topic
|
||||
- Titles must work as standalone note titles (no "Overview" or "Introduction" generics)
|
||||
- No overlap between sections
|
||||
- `focus` is one sentence describing what this section should specifically cover
|
||||
|
||||
**Guardrails:**
|
||||
- Fewer than 3 sections parsed → fall back to single-note synthesis
|
||||
- JSON parse failure → fall back to single-note synthesis
|
||||
- More than 8 sections → truncate to 8
|
||||
|
||||
**Model params:** `max_tokens=400, num_ctx=16384` (outline is short)
|
||||
|
||||
---
|
||||
|
||||
## Section Synthesis
|
||||
|
||||
New function: `_synthesize_section(section_title, section_focus, sources, model) -> tuple[str, str]`
|
||||
|
||||
Returns `(title, body_markdown)`.
|
||||
|
||||
All sections receive all fetched sources. The `section_focus` field in the prompt directs the model to draw only what's relevant to that section's scope.
|
||||
|
||||
**Prompt requirements:**
|
||||
- 300–600 words of substantive prose
|
||||
- Do NOT include a `# Title` heading (title is set separately)
|
||||
- End with a brief `## Sources` list of relevant URLs from the provided sources
|
||||
- Focus strictly on `section_focus` — ignore source material outside that scope
|
||||
|
||||
**Model params:** `num_predict=2048, num_ctx=16384` (reduced from 8192 — sufficient for 600 words, prevents rambling)
|
||||
|
||||
**Parallelism:** All section synthesis calls run via `asyncio.gather`. Wall-clock time stays close to a single synthesis call despite producing N notes.
|
||||
|
||||
---
|
||||
|
||||
## Note Creation and Index Note
|
||||
|
||||
**Section notes:**
|
||||
- Tags: `["research"]`
|
||||
- `project_id`: same as passed to pipeline (or None)
|
||||
- Title: from outline `title` field
|
||||
- Created sequentially (avoids DB contention)
|
||||
|
||||
**Index note:**
|
||||
- Tags: `["research", "research-index"]`
|
||||
- `project_id`: same as section notes
|
||||
- Title: `"Research: [topic]"`
|
||||
- Created last (after all section notes exist)
|
||||
|
||||
**Index note body format:**
|
||||
```markdown
|
||||
Research overview for **[topic]** — [YYYY-MM-DD]
|
||||
|
||||
Generated from [N] web sources across [M] sections.
|
||||
|
||||
## Sections
|
||||
|
||||
- **[Section 1 Title]** — [focus sentence]
|
||||
- **[Section 2 Title]** — [focus sentence]
|
||||
...
|
||||
|
||||
*Search for any section title to read it.*
|
||||
```
|
||||
|
||||
The index note is what `run_research_pipeline` returns. The existing `research_topic` tool handler uses `note.id` and `note.title` — both remain valid with the index note.
|
||||
|
||||
---
|
||||
|
||||
## Error Handling
|
||||
|
||||
| Scenario | Behaviour |
|
||||
|---|---|
|
||||
| Outline generation raises | Fall back to single-note synthesis (current behaviour) |
|
||||
| Outline JSON unparseable | Fall back to single-note synthesis |
|
||||
| Outline returns < 3 sections | Fall back to single-note synthesis |
|
||||
| Outline returns > 8 sections | Truncate to 8, continue |
|
||||
| A section synthesis raises | Log warning, skip that section; continue with remaining |
|
||||
| All section syntheses fail | Fall back to single-note synthesis |
|
||||
| A section note DB save fails | Log warning, skip from index; index note still created |
|
||||
| No sources fetched | Raise `ValueError` as today — unchanged |
|
||||
|
||||
The fallback in every case is the current single-note pipeline. Research never silently produces nothing.
|
||||
|
||||
---
|
||||
|
||||
## What Is NOT Changing
|
||||
|
||||
- Public function signature of `run_research_pipeline`
|
||||
- Sub-query generation (`_generate_sub_queries`)
|
||||
- SearXNG search and URL fetching
|
||||
- `_search_searxng`, `_search_searxng_images`, `fetch_url_content`
|
||||
- The `research_topic` tool definition and handler in `tools.py`
|
||||
- The `quick_capture` research path
|
||||
- Any frontend component
|
||||
@@ -0,0 +1,204 @@
|
||||
# Settings Consistency Pass — Design
|
||||
|
||||
> **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:** Fix five interrelated gaps in the settings UI — missing timezone field, SSO-unaware account tab, duplicated work schedule, ignored slot toggles, and timezone changes not propagating to the briefing scheduler.
|
||||
|
||||
**Architecture:** Primarily frontend cleanup with two focused backend hooks: settings PUT route gains a timezone→scheduler bridge; briefing scheduler gains slot-gating and work-day awareness.
|
||||
|
||||
**Tech Stack:** Vue 3 + TypeScript frontend; Python/Quart backend; APScheduler; `zoneinfo`.
|
||||
|
||||
---
|
||||
|
||||
## Problem summary
|
||||
|
||||
1. **No timezone field** — `user_timezone` is read by the scheduler and the chat pipeline but is never exposed in the UI. The briefing tab displays the browser's detected timezone but never persists it. Scheduler falls back to UTC.
|
||||
|
||||
2. **Account tab ignores SSO** — "Email Address" and "Change Password" sections are shown to SSO users (`has_password = false`) even though they cannot change credentials here.
|
||||
|
||||
3. **Work schedule duplicated** — Profile tab has the canonical work schedule (days + start/end time, stored in `profile.work_schedule`). Briefing tab has a redundant "Office Days" section (`briefing_config.work_days`) that the backend never reads.
|
||||
|
||||
4. **Slot toggles are decorative** — The briefing tab's four slot checkboxes are saved to `briefing_config.slots` but `_add_user_jobs` schedules all four slots unconditionally.
|
||||
|
||||
5. **Timezone setting not propagated** — `PUT /api/settings` saves `user_timezone` to the DB but does not call `update_user_schedule`, so the in-memory scheduler keeps the stale timezone until restart or briefing config re-save.
|
||||
|
||||
---
|
||||
|
||||
## Components
|
||||
|
||||
### 1. General tab — Timezone field
|
||||
|
||||
**File:** `frontend/src/views/SettingsView.vue`
|
||||
|
||||
New section in the General tab (after the Assistant section, before Model Management):
|
||||
|
||||
```html
|
||||
<section class="settings-section full-width">
|
||||
<h2>Timezone</h2>
|
||||
<p class="section-desc">Used to schedule briefings and format times in chat.</p>
|
||||
<div class="field">
|
||||
<label for="user-timezone">Your timezone</label>
|
||||
<div style="display:flex; gap:0.5rem; align-items:center">
|
||||
<input id="user-timezone" v-model="userTimezone" type="text"
|
||||
class="input" placeholder="e.g. America/New_York" />
|
||||
<button class="btn-secondary" type="button" @click="detectTimezone">Detect</button>
|
||||
</div>
|
||||
<p class="field-hint">IANA timezone name (e.g. America/Chicago, Europe/London).</p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn-save" @click="saveTimezone" :disabled="savingTimezone">
|
||||
{{ savingTimezone ? 'Saving…' : 'Save' }}
|
||||
</button>
|
||||
<span v-if="timezoneSaved" class="saved-msg">Saved!</span>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
- `detectTimezone()` sets `userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone`
|
||||
- `saveTimezone()` calls `PUT /api/settings` with `{ user_timezone: userTimezone }`
|
||||
- Loaded in `onMounted` / general settings load alongside `assistantName`, `defaultModel`
|
||||
|
||||
The briefing tab's "Firing in timezone" hint changes from the live Intl API to reading the stored `user_timezone` value:
|
||||
```
|
||||
Firing in timezone: <strong>{{ userTimezone || 'UTC (not set)' }}</strong>
|
||||
```
|
||||
|
||||
### 2. Account tab — SSO guard
|
||||
|
||||
**File:** `frontend/src/views/SettingsView.vue`
|
||||
|
||||
Wrap the Email and Password sections:
|
||||
|
||||
```html
|
||||
<!-- SSO info banner (shown when no local password) -->
|
||||
<section v-if="!authStore.user?.has_password" class="settings-section">
|
||||
<h2>Account</h2>
|
||||
<p class="section-desc">
|
||||
Your account is managed by an external identity provider.
|
||||
Email and password changes are made through your provider, not here.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Local-auth sections (hidden for SSO) -->
|
||||
<template v-if="authStore.user?.has_password">
|
||||
<section class="settings-section"> <!-- Email Address --> </section>
|
||||
<section class="settings-section"> <!-- Change Password --> </section>
|
||||
</template>
|
||||
|
||||
<!-- Active Sessions — always shown -->
|
||||
<section class="settings-section"> ... </section>
|
||||
```
|
||||
|
||||
No backend change needed — the API already rejects email/password changes for SSO accounts.
|
||||
|
||||
### 3. Briefing tab — Remove Office Days
|
||||
|
||||
**File:** `frontend/src/views/SettingsView.vue`
|
||||
|
||||
Delete the "Office Days" `<section>` (lines ~2068–2082). The `briefing_config.work_days` field can remain in the config object for backwards compatibility but the UI stops writing it.
|
||||
|
||||
The slot toggles section stays — it now actually drives scheduling (see §5).
|
||||
|
||||
### 4. Backend — settings PUT propagates timezone to scheduler
|
||||
|
||||
**File:** `src/fabledassistant/routes/settings.py`
|
||||
|
||||
After `set_settings_batch`, add:
|
||||
|
||||
```python
|
||||
if "user_timezone" in to_save:
|
||||
import json
|
||||
from fabledassistant.services.briefing_scheduler import update_user_schedule
|
||||
config_raw = await get_setting(uid, "briefing_config", "{}")
|
||||
try:
|
||||
config = json.loads(config_raw) if isinstance(config_raw, str) else {}
|
||||
except Exception:
|
||||
config = {}
|
||||
if config.get("enabled"):
|
||||
update_user_schedule(uid, config, tz_override=to_save["user_timezone"] or None)
|
||||
```
|
||||
|
||||
### 5. Backend — scheduler respects slot toggles and work days
|
||||
|
||||
**File:** `src/fabledassistant/services/briefing_scheduler.py`
|
||||
|
||||
**5a. `_add_user_jobs` — only schedule enabled slots**
|
||||
|
||||
Change signature to accept `config: dict`:
|
||||
|
||||
```python
|
||||
def _add_user_jobs(user_id: int, tz: str, config: dict | None = None) -> None:
|
||||
enabled_slots = (config or {}).get("slots", {})
|
||||
for slot_name, hour, minute in SLOTS:
|
||||
# Default True for compilation (always run); others respect toggle
|
||||
if slot_name != "compilation" and not enabled_slots.get(slot_name, True):
|
||||
jid = _job_id(user_id, slot_name)
|
||||
if _scheduler and _scheduler.get_job(jid):
|
||||
_scheduler.remove_job(jid)
|
||||
continue
|
||||
_scheduler.add_job(
|
||||
_run_user_slot_sync,
|
||||
CronTrigger(hour=hour, minute=minute, timezone=tz),
|
||||
args=[user_id, slot_name],
|
||||
id=_job_id(user_id, slot_name),
|
||||
replace_existing=True,
|
||||
misfire_grace_time=3600,
|
||||
)
|
||||
```
|
||||
|
||||
Update callers:
|
||||
- `update_user_schedule(user_id, config, tz_override)` → pass `config` to `_add_user_jobs`
|
||||
- `start_briefing_scheduler` startup loop → fetch full config to pass through
|
||||
|
||||
**5b. `_run_slot_for_user` — skip morning on non-work days**
|
||||
|
||||
For the `morning` slot, check today against `profile.work_schedule.days`:
|
||||
|
||||
```python
|
||||
if slot == "morning":
|
||||
from fabledassistant.services.user_profile import get_profile
|
||||
from datetime import datetime
|
||||
tz_str = await get_setting(user_id, "user_timezone") or "UTC"
|
||||
try:
|
||||
user_tz = ZoneInfo(tz_str)
|
||||
except Exception:
|
||||
user_tz = ZoneInfo("UTC")
|
||||
today_abbr = datetime.now(user_tz).strftime("%a") # 'Mon', 'Tue', …
|
||||
profile = await get_profile(user_id)
|
||||
work_days = (profile.work_schedule or {}).get("days", ["Mon","Tue","Wed","Thu","Fri"])
|
||||
if today_abbr not in work_days:
|
||||
logger.info("Skipping morning slot for user %d — %s not a work day", user_id, today_abbr)
|
||||
return
|
||||
```
|
||||
|
||||
Note: `get_profile` must be importable from `user_profile.py` — confirm signature during implementation.
|
||||
|
||||
---
|
||||
|
||||
## Data flow
|
||||
|
||||
1. User opens Settings → General tab loads, reads `user_timezone` from `GET /api/settings`, populates the field
|
||||
2. User clicks Detect → browser timezone fills the field
|
||||
3. User clicks Save → `PUT /api/settings {user_timezone: "America/New_York"}` → backend saves and immediately calls `update_user_schedule` if briefing enabled
|
||||
4. Briefing tab "Firing in timezone" now shows stored value instead of live browser API
|
||||
5. Next 8am job: scheduler checks if `morning` is enabled in `briefing_config.slots`, then checks if today is in `profile.work_schedule.days` before running
|
||||
|
||||
---
|
||||
|
||||
## Error handling
|
||||
|
||||
| Scenario | Behaviour |
|
||||
|---|---|
|
||||
| `user_timezone` saved as empty string | `update_user_schedule` called with `tz_override=None` → falls back to `briefing_config.timezone` or UTC |
|
||||
| Invalid IANA string saved | `_resolve_timezone` already falls back to UTC with a warning log |
|
||||
| `profile.work_schedule` is None | `morning` slot defaults to Mon–Fri |
|
||||
| Slot toggles key missing from config | All non-compilation slots default to enabled (`True`) — no regression for existing users |
|
||||
| SSO user visits Account tab | Sees info banner; email/password forms hidden; no API calls attempted |
|
||||
|
||||
---
|
||||
|
||||
## What is NOT changing
|
||||
|
||||
- Profile "Interests" and Briefing "News Preferences" remain separate — they serve different purposes (system-prompt personalisation vs RSS topic filtering)
|
||||
- `briefing_config.work_days` field is not deleted from existing configs — just stops being written by the UI
|
||||
- No migration needed — `profile.work_schedule.days` already exists; scheduler change is additive
|
||||
@@ -0,0 +1,278 @@
|
||||
# Web Voice Overlay Polish — Implementation Spec
|
||||
|
||||
> **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:** Ship the dormant `VoiceOverlay` component by mounting it, wiring the Space bar shortcut, and replacing push-to-talk with click-to-toggle silence detection.
|
||||
|
||||
**Architecture:** A new `useSilenceDetector` composable wraps the Web Audio API `AnalyserNode` and fires a callback when sustained silence is detected. `VoiceOverlay` coordinates `useVoiceRecorder` and `useSilenceDetector`, switching from hold-to-record to click-to-toggle. `App.vue` mounts the overlay and adds the Space bar handler.
|
||||
|
||||
**Tech Stack:** Vue 3 Composition API, Web Audio API (`AnalyserNode`), existing `useVoiceRecorder` / `useVoiceAudio` composables, TypeScript.
|
||||
|
||||
---
|
||||
|
||||
## File Map
|
||||
|
||||
| Action | Path |
|
||||
|--------|------|
|
||||
| Create | `frontend/src/composables/useSilenceDetector.ts` |
|
||||
| Modify | `frontend/src/composables/useVoiceRecorder.ts` |
|
||||
| Modify | `frontend/src/components/VoiceOverlay.vue` |
|
||||
| Modify | `frontend/src/App.vue` |
|
||||
|
||||
---
|
||||
|
||||
## Task 1: `useSilenceDetector` composable
|
||||
|
||||
**Files:**
|
||||
- Create: `frontend/src/composables/useSilenceDetector.ts`
|
||||
|
||||
### Interface
|
||||
|
||||
```ts
|
||||
export interface SilenceDetectorOptions {
|
||||
thresholdDb?: number // default -40
|
||||
silenceDurationMs?: number // default 1500
|
||||
minRecordingMs?: number // default 500
|
||||
}
|
||||
|
||||
export function useSilenceDetector(options?: SilenceDetectorOptions): {
|
||||
amplitude: Readonly<Ref<number>> // 0–1, for visualization
|
||||
start(stream: MediaStream, onSilence: () => void): void
|
||||
stop(): void
|
||||
}
|
||||
```
|
||||
|
||||
### Behaviour
|
||||
|
||||
- `start(stream, onSilence)`:
|
||||
1. Creates `AudioContext`
|
||||
2. `createMediaStreamSource(stream)` → connects to `AnalyserNode` (fftSize 256)
|
||||
3. Records `startedAt = Date.now()`
|
||||
4. Starts a `setInterval` at 100ms that:
|
||||
- Calls `analyser.getByteFrequencyData(dataArray)`
|
||||
- Computes RMS amplitude → maps to 0–1 range for `amplitude.value`
|
||||
- Converts to approximate dB: `db = 20 * log10(rms)` (clamp to -100 when rms === 0)
|
||||
- If `db < thresholdDb`: increments `silenceMs += 100`; else resets `silenceMs = 0`
|
||||
- If `silenceMs >= silenceDurationMs` AND `Date.now() - startedAt >= minRecordingMs`: clears interval, fires `onSilence()`
|
||||
- `stop()`: clears interval, closes `AudioContext`, resets `amplitude.value = 0`
|
||||
- Safe to call `stop()` multiple times (guard with null check)
|
||||
- `amplitude` resets to 0 after `stop()`
|
||||
|
||||
### Full implementation
|
||||
|
||||
```ts
|
||||
import { ref, readonly } from 'vue'
|
||||
|
||||
export interface SilenceDetectorOptions {
|
||||
thresholdDb?: number
|
||||
silenceDurationMs?: number
|
||||
minRecordingMs?: number
|
||||
}
|
||||
|
||||
export function useSilenceDetector(options: SilenceDetectorOptions = {}) {
|
||||
const {
|
||||
thresholdDb = -40,
|
||||
silenceDurationMs = 1500,
|
||||
minRecordingMs = 500,
|
||||
} = options
|
||||
|
||||
const amplitude = ref(0)
|
||||
let audioCtx: AudioContext | null = null
|
||||
let intervalId: ReturnType<typeof setInterval> | null = null
|
||||
let silenceMs = 0
|
||||
let startedAt = 0
|
||||
|
||||
function start(stream: MediaStream, onSilence: () => void) {
|
||||
stop()
|
||||
audioCtx = new AudioContext()
|
||||
const source = audioCtx.createMediaStreamSource(stream)
|
||||
const analyser = audioCtx.createAnalyser()
|
||||
analyser.fftSize = 256
|
||||
source.connect(analyser)
|
||||
|
||||
const data = new Uint8Array(analyser.frequencyBinCount)
|
||||
silenceMs = 0
|
||||
startedAt = Date.now()
|
||||
|
||||
intervalId = setInterval(() => {
|
||||
analyser.getByteFrequencyData(data)
|
||||
const rms = Math.sqrt(data.reduce((s, v) => s + v * v, 0) / data.length) / 255
|
||||
amplitude.value = rms
|
||||
|
||||
const db = rms > 0 ? 20 * Math.log10(rms) : -100
|
||||
if (db < thresholdDb) {
|
||||
silenceMs += 100
|
||||
if (silenceMs >= silenceDurationMs && Date.now() - startedAt >= minRecordingMs) {
|
||||
stop()
|
||||
onSilence()
|
||||
}
|
||||
} else {
|
||||
silenceMs = 0
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function stop() {
|
||||
if (intervalId !== null) {
|
||||
clearInterval(intervalId)
|
||||
intervalId = null
|
||||
}
|
||||
if (audioCtx) {
|
||||
audioCtx.close().catch(() => {})
|
||||
audioCtx = null
|
||||
}
|
||||
amplitude.value = 0
|
||||
silenceMs = 0
|
||||
}
|
||||
|
||||
return { amplitude: readonly(amplitude), start, stop }
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] Write the file exactly as above
|
||||
- [ ] Verify TypeScript compiles: `cd frontend && npx tsc --noEmit`
|
||||
- [ ] Commit: `git add frontend/src/composables/useSilenceDetector.ts && git commit -m "feat: add useSilenceDetector composable"`
|
||||
|
||||
---
|
||||
|
||||
## Task 2: Expose `stream` from `useVoiceRecorder`
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/src/composables/useVoiceRecorder.ts`
|
||||
|
||||
Change the `stream` local variable to a `Ref<MediaStream | null>` and export it as readonly.
|
||||
|
||||
- [ ] Change `let stream: MediaStream | null = null` to `const streamRef = ref<MediaStream | null>(null)`
|
||||
- [ ] Replace all `stream` assignments with `streamRef.value`:
|
||||
- `stream = await navigator.mediaDevices.getUserMedia(...)` → `streamRef.value = await ...`
|
||||
- `stream?.getTracks().forEach(...)` → `streamRef.value?.getTracks().forEach(...)`
|
||||
- `stream = null` → `streamRef.value = null`
|
||||
- [ ] Add `stream: readonly(streamRef)` to the return object
|
||||
- [ ] Verify TypeScript: `npx tsc --noEmit`
|
||||
- [ ] Commit: `git add frontend/src/composables/useVoiceRecorder.ts && git commit -m "feat: expose stream ref from useVoiceRecorder"`
|
||||
|
||||
---
|
||||
|
||||
## Task 3: Wire `VoiceOverlay` — silence detection + click-to-toggle
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/src/components/VoiceOverlay.vue`
|
||||
|
||||
### Script changes
|
||||
|
||||
- [ ] Import `useSilenceDetector` at the top of `<script setup>`
|
||||
- [ ] Add `const silenceDetector = useSilenceDetector()` after the existing composable instantiations
|
||||
- [ ] In `startPtt()`: after `phase.value = 'recording'`, add:
|
||||
```ts
|
||||
if (recorder.stream.value) {
|
||||
silenceDetector.start(recorder.stream.value, stopPtt)
|
||||
}
|
||||
```
|
||||
- [ ] In `stopPtt()`: add `silenceDetector.stop()` as the first line (before the guard check)
|
||||
- [ ] In `cancelAll()`: add `silenceDetector.stop()` after `recorder.stopRecording().catch(() => {})`
|
||||
|
||||
### Button: click-to-toggle
|
||||
|
||||
Replace the PTT mouse/touch handlers on `.voice-ptt-btn` with click-to-toggle logic:
|
||||
|
||||
- [ ] Remove `@mousedown.prevent="startPtt"` and `@mouseup.prevent="stopPtt"`
|
||||
- [ ] Remove `@touchstart.prevent="startPtt"` and `@touchend.prevent="stopPtt"`
|
||||
- [ ] Replace `@click.prevent="phase === 'error' ? (phase = 'idle') : undefined"` with:
|
||||
```html
|
||||
@click.prevent="onBtnClick"
|
||||
```
|
||||
- [ ] Add `onBtnClick` function in script:
|
||||
```ts
|
||||
function onBtnClick() {
|
||||
if (phase.value === 'error') { phase.value = 'idle'; return }
|
||||
if (phase.value === 'recording') { stopPtt(); return }
|
||||
if (phase.value === 'idle') { startPtt() }
|
||||
}
|
||||
```
|
||||
- [ ] Update `aria-label` and `title` on the button:
|
||||
- `aria-label`: `phase === 'recording' ? 'Click to stop' : 'Click to speak'`
|
||||
- `title`: `phase === 'recording' ? 'Click to stop or wait for silence' : 'Click or press Space to speak'`
|
||||
|
||||
### Amplitude visualization during recording
|
||||
|
||||
Inside the button, when `phase === 'recording'`, replace the static stop icon with animated amplitude bars:
|
||||
|
||||
- [ ] Replace the recording SVG block:
|
||||
```html
|
||||
<svg v-else-if="phase === 'recording'" ...>...</svg>
|
||||
```
|
||||
with:
|
||||
```html
|
||||
<span v-else-if="phase === 'recording'" class="voice-amp-bars">
|
||||
<span
|
||||
v-for="n in 3"
|
||||
:key="n"
|
||||
class="voice-amp-bar"
|
||||
:style="{ transform: `scaleY(${0.3 + silenceDetector.amplitude.value * (0.4 + n * 0.15)})` }"
|
||||
></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
### Hint label
|
||||
|
||||
- [ ] Change the idle hint from `Hold <kbd>Space</kbd> or tap` to `Tap or press <kbd>Space</kbd>`
|
||||
|
||||
### CSS for amplitude bars
|
||||
|
||||
- [ ] Add to `<style scoped>`:
|
||||
```css
|
||||
.voice-amp-bars {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
}
|
||||
.voice-amp-bar {
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
transform-origin: center;
|
||||
transition: transform 0.08s ease;
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] Verify TypeScript: `npx tsc --noEmit`
|
||||
- [ ] Commit: `git add frontend/src/components/VoiceOverlay.vue && git commit -m "feat: click-to-toggle silence detection in VoiceOverlay"`
|
||||
|
||||
---
|
||||
|
||||
## Task 4: Mount overlay and wire Space bar in `App.vue`
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/src/App.vue`
|
||||
|
||||
### Mount VoiceOverlay
|
||||
|
||||
- [ ] Add import at top of `<script setup>`:
|
||||
```ts
|
||||
import VoiceOverlay from '@/components/VoiceOverlay.vue'
|
||||
```
|
||||
- [ ] Add `<VoiceOverlay />` inside the `<template v-if="authStore.isAuthenticated">` block, just before `<ToastNotification />`:
|
||||
```html
|
||||
<VoiceOverlay />
|
||||
<ToastNotification />
|
||||
```
|
||||
|
||||
### Space bar handler
|
||||
|
||||
- [ ] In `onGlobalKeydown`, add a `Space` case inside the `switch (e.key)` block (after the existing cases), only fires when `!isInputActive()`:
|
||||
```ts
|
||||
case ' ':
|
||||
e.preventDefault()
|
||||
document.dispatchEvent(new CustomEvent('voice:ptt-toggle'))
|
||||
break
|
||||
```
|
||||
|
||||
### Shortcuts panel label
|
||||
|
||||
- [ ] Update the Space shortcut description from `Hold to speak (voice, when enabled)` to `Tap to speak (voice, when enabled)`
|
||||
|
||||
- [ ] Verify TypeScript: `npx tsc --noEmit`
|
||||
- [ ] Verify full build: `npm run build`
|
||||
- [ ] Commit: `git add frontend/src/App.vue && git commit -m "feat: mount VoiceOverlay and wire Space bar shortcut"`
|
||||
@@ -36,7 +36,7 @@ class FableClient:
|
||||
self._client = httpx.AsyncClient(
|
||||
base_url=self.base_url,
|
||||
headers=self._headers,
|
||||
timeout=30.0,
|
||||
timeout=httpx.Timeout(connect=10.0, read=300.0, write=30.0, pool=10.0),
|
||||
)
|
||||
return self
|
||||
|
||||
@@ -91,7 +91,9 @@ class FableClient:
|
||||
async def stream_get(self, path: str, **kwargs: Any) -> AsyncIterator[str]:
|
||||
"""Yield non-empty lines from a streaming GET response (SSE)."""
|
||||
async with self._http().stream("GET", path, **kwargs) as response:
|
||||
self._raise_for_status(response)
|
||||
if response.is_error:
|
||||
await response.aread()
|
||||
self._raise_for_status(response)
|
||||
async for line in response.aiter_lines():
|
||||
if line:
|
||||
yield line
|
||||
|
||||
@@ -298,7 +298,7 @@ async def fable_update_task(
|
||||
|
||||
|
||||
@mcp.tool()
|
||||
async def fable_add_task_log(task_id: int, body: str) -> dict:
|
||||
async def fable_add_task_log(task_id: int, content: str) -> dict:
|
||||
"""Append a timestamped progress log entry to a Fable task.
|
||||
|
||||
Use this to record work sessions, decisions, or status updates over time without
|
||||
@@ -306,7 +306,7 @@ async def fable_add_task_log(task_id: int, body: str) -> dict:
|
||||
chronologically in the task view.
|
||||
"""
|
||||
async with FableClient() as client:
|
||||
return await tasks.add_task_log(client, task_id=task_id, body=body)
|
||||
return await tasks.add_task_log(client, task_id=task_id, content=content)
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
@@ -565,7 +565,7 @@ async def fable_get_app_logs(
|
||||
"""Fetch Fable application logs. Requires an admin-scoped API key.
|
||||
|
||||
Args:
|
||||
category: Log category — "error" (default), "audit", or "usage".
|
||||
category: Log category — "error" (default), "audit", "usage", or "generation".
|
||||
limit: Maximum number of log entries to return.
|
||||
search: Optional keyword filter matched against action, endpoint, username, details.
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ async def get_app_logs(
|
||||
) -> dict:
|
||||
"""Fetch application logs from Fable. Requires an admin-scoped API key.
|
||||
|
||||
category: "error" | "audit" | "usage" (default: "error")
|
||||
category: "error" | "audit" | "usage" | "generation" (default: "error")
|
||||
"""
|
||||
params: dict = {"category": category, "limit": limit}
|
||||
if search:
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
"""MCP tools for Fable chat — create conversations and stream responses."""
|
||||
from __future__ import annotations
|
||||
|
||||
import asyncio
|
||||
import json
|
||||
from typing import Any
|
||||
|
||||
from fable_mcp.client import FableClient
|
||||
from fable_mcp.client import FableClient, FableAPIError
|
||||
|
||||
|
||||
async def list_conversations(
|
||||
@@ -28,7 +29,12 @@ async def send_message(
|
||||
"""Send a message to Fable and return the full assistant response.
|
||||
|
||||
Creates a new MCP conversation if conversation_id is None.
|
||||
Streams the SSE response and accumulates token chunks into a single string.
|
||||
Posts the user message to start generation, then streams the SSE buffer.
|
||||
|
||||
SSE event format:
|
||||
id: <N>
|
||||
event: <type> # chunk | done | tool_call | status | ...
|
||||
data: <json>
|
||||
|
||||
Returns:
|
||||
Dict with:
|
||||
@@ -41,32 +47,46 @@ async def send_message(
|
||||
"/api/chat/conversations",
|
||||
json={"conversation_type": "mcp"},
|
||||
)
|
||||
conversation_id = conv["id"]
|
||||
conversation_id = str(conv["id"])
|
||||
|
||||
# Build SSE stream URL with message as query param
|
||||
params: dict[str, Any] = {"message": message}
|
||||
if think:
|
||||
params["think"] = "true"
|
||||
# Start generation
|
||||
await client.post(
|
||||
f"/api/chat/conversations/{conversation_id}/messages",
|
||||
json={"content": message, "think": think},
|
||||
)
|
||||
|
||||
tokens: list[str] = []
|
||||
tool_calls: list[Any] = []
|
||||
|
||||
stream_path = f"/api/chat/conversations/{conversation_id}/stream"
|
||||
async for raw_line in client.stream_get(stream_path, params=params):
|
||||
if not raw_line.startswith("data: "):
|
||||
continue
|
||||
payload_str = raw_line[len("data: "):]
|
||||
stream_path = f"/api/chat/conversations/{conversation_id}/generation/stream"
|
||||
|
||||
# Retry connecting to the stream briefly — the background task may not have
|
||||
# created the generation buffer by the time we issue the GET.
|
||||
for attempt in range(10):
|
||||
try:
|
||||
event = json.loads(payload_str)
|
||||
except json.JSONDecodeError:
|
||||
continue
|
||||
event_type = event.get("type")
|
||||
if event_type == "token":
|
||||
tokens.append(event.get("content", ""))
|
||||
elif event_type == "tool_call":
|
||||
tool_calls.append(event)
|
||||
elif event_type == "done":
|
||||
break
|
||||
event_type: str | None = None
|
||||
async for raw_line in client.stream_get(stream_path):
|
||||
if raw_line.startswith("event: "):
|
||||
event_type = raw_line[len("event: "):].strip()
|
||||
elif raw_line.startswith("data: "):
|
||||
payload_str = raw_line[len("data: "):]
|
||||
try:
|
||||
data = json.loads(payload_str)
|
||||
except json.JSONDecodeError:
|
||||
continue
|
||||
if event_type == "chunk":
|
||||
tokens.append(data.get("chunk", ""))
|
||||
elif event_type == "tool_call":
|
||||
tool_calls.append(data.get("tool_call", data))
|
||||
elif event_type == "done":
|
||||
break
|
||||
event_type = None # reset after consuming data line
|
||||
break # stream completed successfully
|
||||
except FableAPIError as exc:
|
||||
if exc.status_code == 404 and attempt < 9:
|
||||
await asyncio.sleep(0.3)
|
||||
continue
|
||||
raise
|
||||
|
||||
return {
|
||||
"conversation_id": conversation_id,
|
||||
|
||||
@@ -87,7 +87,7 @@ async def add_task_log(
|
||||
client: FableClient,
|
||||
*,
|
||||
task_id: int,
|
||||
body: str,
|
||||
content: str,
|
||||
) -> dict[str, Any]:
|
||||
"""Append a log entry to a task."""
|
||||
return await client.post(f"/api/tasks/{task_id}/logs", json={"body": body})
|
||||
return await client.post(f"/api/tasks/{task_id}/logs", json={"content": content})
|
||||
|
||||
@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
|
||||
|
||||
[project]
|
||||
name = "fable-mcp"
|
||||
version = "0.1.0"
|
||||
version = "0.2.4"
|
||||
description = "MCP server for Fabled Assistant"
|
||||
requires-python = ">=3.12"
|
||||
dependencies = [
|
||||
|
||||
@@ -46,9 +46,9 @@ async def test_update_task_patches(client):
|
||||
@pytest.mark.asyncio
|
||||
async def test_add_task_log_posts_to_logs_endpoint(client):
|
||||
from fable_mcp.tools.tasks import add_task_log
|
||||
client.post = AsyncMock(return_value={"id": 1, "body": "progress"})
|
||||
await add_task_log(client, task_id=9, body="progress")
|
||||
client.post = AsyncMock(return_value={"id": 1, "content": "progress"})
|
||||
await add_task_log(client, task_id=9, content="progress")
|
||||
client.post.assert_called_once()
|
||||
path = client.post.call_args[0][0]
|
||||
assert path == "/api/tasks/9/logs"
|
||||
assert client.post.call_args[1]["json"]["body"] == "progress"
|
||||
assert client.post.call_args[1]["json"]["content"] == "progress"
|
||||
|
||||
+14
-1
@@ -22,8 +22,18 @@ const { showShortcuts, toggleShortcuts, closeShortcuts } = useShortcuts();
|
||||
function startAppServices() {
|
||||
chatStore.startStatusPolling();
|
||||
settingsStore.fetchSettings();
|
||||
settingsStore.checkVoiceStatus();
|
||||
// Sync browser timezone to the server on every login/page load.
|
||||
apiPut("/api/settings", { user_timezone: Intl.DateTimeFormat().resolvedOptions().timeZone }).catch(() => {});
|
||||
// Re-check voice status when the tab becomes visible again (model may
|
||||
// have finished loading while the user was away).
|
||||
document.addEventListener("visibilitychange", onVisibilityChange);
|
||||
}
|
||||
|
||||
function onVisibilityChange() {
|
||||
if (document.visibilityState === "visible" && authStore.isAuthenticated) {
|
||||
settingsStore.checkVoiceStatus();
|
||||
}
|
||||
}
|
||||
|
||||
function stopAppServices() {
|
||||
@@ -149,6 +159,7 @@ watch(
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("keydown", onGlobalKeydown);
|
||||
document.removeEventListener("visibilitychange", onVisibilityChange);
|
||||
stopAppServices();
|
||||
});
|
||||
</script>
|
||||
@@ -313,7 +324,9 @@ onUnmounted(() => {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.app-content:has(.workspace-root) {
|
||||
.app-content:has(.workspace-root),
|
||||
.app-content:has(.chat-page),
|
||||
.app-content:has(.knowledge-root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
+114
-1
@@ -123,7 +123,6 @@ export interface NotificationEntry {
|
||||
export interface UserSearchResult {
|
||||
id: number
|
||||
username: string
|
||||
email: string | null
|
||||
}
|
||||
|
||||
// --- User search ---
|
||||
@@ -427,6 +426,10 @@ export async function deleteRssReaction(rssItemId: number): Promise<void> {
|
||||
return apiDelete(`/api/briefing/rss-reactions/${rssItemId}`);
|
||||
}
|
||||
|
||||
export async function openArticleInChat(itemId: number): Promise<{ conversation_id: number }> {
|
||||
return apiPost(`/api/chat/from-article/${itemId}`, {});
|
||||
}
|
||||
|
||||
export async function geocodeAddress(address: string): Promise<{ lat: number; lon: number; display_name: string } | null> {
|
||||
try {
|
||||
const r = await apiPost<{ lat: number; lon: number; label: string }>('/api/briefing/weather/geocode', { query: address });
|
||||
@@ -598,3 +601,113 @@ export const createApiKey = (name: string, scope: 'read' | 'write') =>
|
||||
apiPost<{ key: string; api_key: ApiKeyEntry }>('/api/api-keys', { name, scope })
|
||||
|
||||
export const revokeApiKey = (id: number) => apiDelete(`/api/api-keys/${id}`)
|
||||
|
||||
// ─── News ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
import type { NewsItem } from '@/types/news'
|
||||
|
||||
export interface GetNewsItemsParams {
|
||||
days?: number
|
||||
limit?: number
|
||||
offset?: number
|
||||
feed_id?: number | null
|
||||
}
|
||||
|
||||
export function getNewsItems(params: GetNewsItemsParams = {}) {
|
||||
const p = new URLSearchParams()
|
||||
if (params.days != null) p.set('days', String(params.days))
|
||||
if (params.limit != null) p.set('limit', String(params.limit))
|
||||
if (params.offset != null) p.set('offset', String(params.offset))
|
||||
if (params.feed_id != null) p.set('feed_id', String(params.feed_id))
|
||||
return apiGet<{ items: NewsItem[]; offset: number; limit: number }>(
|
||||
`/api/briefing/news?${p}`
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Voice ────────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface VoiceStatusResult {
|
||||
enabled: boolean
|
||||
stt: boolean
|
||||
tts: boolean
|
||||
stt_model?: string
|
||||
tts_backend?: string
|
||||
}
|
||||
|
||||
export interface VoiceEntry {
|
||||
id: string
|
||||
label: string
|
||||
}
|
||||
|
||||
export interface VoiceBlendEntry {
|
||||
voice: string
|
||||
weight: number
|
||||
}
|
||||
|
||||
export const getVoiceStatus = () => apiGet<VoiceStatusResult>('/api/voice/status')
|
||||
|
||||
export const getVoiceList = () =>
|
||||
apiGet<{ voices: VoiceEntry[] }>('/api/voice/voices').then(r => r.voices)
|
||||
|
||||
export async function transcribeAudio(blob: Blob, context?: string): Promise<{ transcript: string; duration_ms: number }> {
|
||||
const form = new FormData()
|
||||
form.append('audio', blob, 'audio.webm')
|
||||
if (context) form.append('context', context)
|
||||
const res = await fetch('/api/voice/transcribe', { method: 'POST', body: form })
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ error: `HTTP ${res.status}` }))
|
||||
throw new ApiError(res.status, err)
|
||||
}
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function synthesiseSpeech(
|
||||
text: string,
|
||||
voice?: string,
|
||||
speed?: number,
|
||||
voiceBlend?: VoiceBlendEntry[]
|
||||
): Promise<Blob> {
|
||||
// Only send voice/speed/blend when explicitly provided — omitting them lets
|
||||
// the server auto-load the user's saved voice settings (voice, speed, blend).
|
||||
const body: Record<string, unknown> = { text }
|
||||
if (voiceBlend && voiceBlend.length >= 2) {
|
||||
body.voice_blend = voiceBlend
|
||||
if (speed !== undefined) body.speed = speed
|
||||
} else if (voice !== undefined || speed !== undefined) {
|
||||
body.voice = voice ?? 'af_heart'
|
||||
body.speed = speed ?? 1.0
|
||||
}
|
||||
const res = await fetch('/api/voice/synthesise', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ error: `HTTP ${res.status}` }))
|
||||
throw new ApiError(res.status, err)
|
||||
}
|
||||
return res.blob()
|
||||
}
|
||||
|
||||
// ── User Profile ─────────────────────────────────────────────────────────────
|
||||
|
||||
export interface UserProfile {
|
||||
display_name: string
|
||||
job_title: string
|
||||
industry: string
|
||||
expertise_level: 'novice' | 'intermediate' | 'expert'
|
||||
response_style: 'concise' | 'balanced' | 'detailed'
|
||||
tone: 'casual' | 'professional' | 'technical'
|
||||
interests: string[]
|
||||
work_schedule: { days?: string[]; start?: string; end?: string }
|
||||
learned_summary: string
|
||||
observations_count: number
|
||||
observations_updated_at: string | null
|
||||
}
|
||||
|
||||
export const getProfile = () => apiGet<UserProfile>('/api/profile')
|
||||
export const updateProfile = (data: Partial<UserProfile>) =>
|
||||
apiPut<UserProfile>('/api/profile', data)
|
||||
export const consolidateProfile = () =>
|
||||
apiPost<{ status: string; learned_summary: string }>('/api/profile/consolidate', {})
|
||||
export const clearProfileObservations = () => apiDelete('/api/profile/observations')
|
||||
|
||||
@@ -180,6 +180,34 @@
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Interactive checkboxes — marked output in the list-note viewer */
|
||||
.prose--checklist ul {
|
||||
list-style: none;
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
.prose--checklist li {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.prose--checklist li input[type="checkbox"] {
|
||||
flex-shrink: 0;
|
||||
accent-color: var(--color-primary);
|
||||
cursor: pointer;
|
||||
width: 0.95em;
|
||||
height: 0.95em;
|
||||
margin: 0;
|
||||
}
|
||||
.prose--checklist li:has(input[type="checkbox"]:checked) > p,
|
||||
.prose--checklist li:has(input[type="checkbox"]:checked) {
|
||||
text-decoration: line-through;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.prose--checklist li:has(input[type="checkbox"]:checked) input[type="checkbox"] {
|
||||
text-decoration: none; /* don't strike through the checkbox itself */
|
||||
}
|
||||
|
||||
/* Tiptap editor */
|
||||
.tiptap-editor .ProseMirror {
|
||||
outline: none;
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
--color-bg: #f5f5fb;
|
||||
--color-bg-secondary: #ededf5;
|
||||
--color-bg-card: #ffffff;
|
||||
--color-surface: #f0f0f8;
|
||||
--color-text: #1a1a1a;
|
||||
--color-text-secondary: #666666;
|
||||
--color-text-muted: #999999;
|
||||
@@ -49,12 +50,17 @@
|
||||
--radius-lg: 18px;
|
||||
--radius-pill: 9999px;
|
||||
--focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
|
||||
/* Layout */
|
||||
--page-max-width: 1200px;
|
||||
--page-padding-x: 1rem;
|
||||
--sidebar-width: 260px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-bg: #111113;
|
||||
--color-bg-secondary: #18181f;
|
||||
--color-bg-card: #1e1e27;
|
||||
--color-surface: #1a1b22;
|
||||
--color-text: #e4e4f0;
|
||||
--color-text-secondary: #8888a8;
|
||||
--color-text-muted: #52526a;
|
||||
|
||||
@@ -15,7 +15,8 @@ const chatStore = useChatStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const isChatActive = computed(() => route.path.startsWith("/chat"));
|
||||
const isChatActive = computed(() => route.path.startsWith("/chat"))
|
||||
const isKnowledgeActive = computed(() => route.path === "/" || route.path === "/knowledge");
|
||||
|
||||
const mobileMenuOpen = ref(false);
|
||||
|
||||
@@ -72,14 +73,13 @@ router.afterEach(() => {
|
||||
|
||||
<!-- Center: primary navigation (desktop) -->
|
||||
<div class="nav-center">
|
||||
<router-link to="/notes" class="nav-link">Notes</router-link>
|
||||
<router-link to="/projects" class="nav-link">Projects</router-link>
|
||||
<router-link to="/tasks" class="nav-link">Tasks</router-link>
|
||||
<router-link to="/" class="nav-link" :class="{ 'router-link-active': isKnowledgeActive }">Knowledge</router-link>
|
||||
<router-link to="/chat" :class="['nav-link', { 'router-link-active': isChatActive }]">Chat</router-link>
|
||||
<router-link to="/graph" class="nav-link">Graph</router-link>
|
||||
<router-link to="/calendar" class="nav-link">Calendar</router-link>
|
||||
<router-link to="/briefing" class="nav-link">Briefing</router-link>
|
||||
<router-link to="/shared" class="nav-link">Shared</router-link>
|
||||
<router-link to="/calendar" class="nav-link">Calendar</router-link>
|
||||
<router-link to="/news" class="nav-link">News</router-link>
|
||||
<router-link to="/tasks" class="nav-link">Tasks</router-link>
|
||||
<router-link to="/projects" class="nav-link">Projects</router-link>
|
||||
</div>
|
||||
|
||||
<!-- Right: status + utilities + gear + user -->
|
||||
@@ -122,13 +122,13 @@ router.afterEach(() => {
|
||||
|
||||
<!-- Mobile dropdown -->
|
||||
<div v-if="mobileMenuOpen" class="mobile-menu">
|
||||
<router-link to="/notes" class="nav-link">Notes</router-link>
|
||||
<router-link to="/projects" class="nav-link">Projects</router-link>
|
||||
<router-link to="/tasks" class="nav-link">Tasks</router-link>
|
||||
<router-link to="/" class="nav-link" :class="{ 'router-link-active': isKnowledgeActive }">Knowledge</router-link>
|
||||
<router-link to="/chat" :class="['nav-link', { 'router-link-active': isChatActive }]">Chat</router-link>
|
||||
<router-link to="/graph" class="nav-link">Graph</router-link>
|
||||
<router-link to="/calendar" class="nav-link">Calendar</router-link>
|
||||
<router-link to="/briefing" class="nav-link">Briefing</router-link>
|
||||
<router-link to="/calendar" class="nav-link">Calendar</router-link>
|
||||
<router-link to="/tasks" class="nav-link">Tasks</router-link>
|
||||
<router-link to="/projects" class="nav-link">Projects</router-link>
|
||||
<router-link to="/news" class="nav-link">News</router-link>
|
||||
<router-link to="/shared" class="nav-link">Shared</router-link>
|
||||
<div class="mobile-divider"></div>
|
||||
<router-link to="/settings" class="nav-link">Settings</router-link>
|
||||
|
||||
@@ -0,0 +1,421 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, nextTick } from 'vue'
|
||||
import { apiGet, transcribeAudio } from '@/api/client'
|
||||
import { useVoiceRecorder } from '@/composables/useVoiceRecorder'
|
||||
import { useSilenceDetector } from '@/composables/useSilenceDetector'
|
||||
import { useChatStore } from '@/stores/chat'
|
||||
import { useSettingsStore } from '@/stores/settings'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import type { Note } from '@/types/note'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
/** Textarea placeholder */
|
||||
placeholder?: string
|
||||
/** When true, hides the note picker (briefing mode) */
|
||||
briefingMode?: boolean
|
||||
/** Pill shape — compact rounded style for widget */
|
||||
pill?: boolean
|
||||
}>(), {
|
||||
placeholder: 'Type a message… (Enter to send, Shift+Enter for new line)',
|
||||
briefingMode: false,
|
||||
pill: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [payload: { content: string; contextNoteId?: number }]
|
||||
abort: []
|
||||
}>()
|
||||
|
||||
const store = useChatStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
const voiceEnabled = computed(() => settingsStore.voiceSttReady)
|
||||
|
||||
// ── Core input ────────────────────────────────────────────────────────────────
|
||||
const messageInput = ref('')
|
||||
const inputEl = ref<HTMLTextAreaElement | null>(null)
|
||||
const wrapperEl = ref<HTMLElement | null>(null)
|
||||
|
||||
function autoResize() {
|
||||
const el = inputEl.value
|
||||
if (!el) return
|
||||
el.style.height = 'auto'
|
||||
el.style.height = Math.min(el.scrollHeight, 150) + 'px'
|
||||
}
|
||||
|
||||
function resetTextareaHeight() {
|
||||
const el = inputEl.value
|
||||
if (!el) return
|
||||
el.style.height = 'auto'
|
||||
}
|
||||
|
||||
function onInputKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
const content = messageInput.value.trim()
|
||||
if (!content) return
|
||||
emit('submit', { content, contextNoteId: attachedNote.value?.id })
|
||||
messageInput.value = ''
|
||||
attachedNote.value = null
|
||||
resetTextareaHeight()
|
||||
}
|
||||
|
||||
// ── Note picker ───────────────────────────────────────────────────────────────
|
||||
const attachedNote = ref<{ id: number; title: string } | null>(null)
|
||||
const showNotePicker = ref(false)
|
||||
const noteSearchQuery = ref('')
|
||||
const noteSearchResults = ref<{ id: number; title: string }[]>([])
|
||||
const noteSearchLoading = ref(false)
|
||||
let noteSearchTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
function toggleNotePicker() {
|
||||
showNotePicker.value = !showNotePicker.value
|
||||
if (showNotePicker.value) {
|
||||
noteSearchQuery.value = ''
|
||||
noteSearchResults.value = []
|
||||
nextTick(() => {
|
||||
(wrapperEl.value?.querySelector('.note-picker-search') as HTMLInputElement)?.focus()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function onNoteSearchInput() {
|
||||
if (noteSearchTimer) clearTimeout(noteSearchTimer)
|
||||
noteSearchTimer = setTimeout(async () => {
|
||||
const q = noteSearchQuery.value.trim()
|
||||
if (!q) { noteSearchResults.value = []; return }
|
||||
noteSearchLoading.value = true
|
||||
try {
|
||||
const data = await apiGet<{ notes: Note[] }>(`/api/notes?q=${encodeURIComponent(q)}&all=true&limit=5`)
|
||||
noteSearchResults.value = data.notes.map((n) => ({ id: n.id, title: n.title }))
|
||||
} catch {
|
||||
noteSearchResults.value = []
|
||||
} finally {
|
||||
noteSearchLoading.value = false
|
||||
}
|
||||
}, 250)
|
||||
}
|
||||
|
||||
function selectNote(note: { id: number; title: string }) {
|
||||
attachedNote.value = note
|
||||
showNotePicker.value = false
|
||||
}
|
||||
|
||||
function removeAttachedNote() {
|
||||
attachedNote.value = null
|
||||
}
|
||||
|
||||
// ── Voice (click-to-toggle + silence detection) ─────────────────────────────
|
||||
const transcribingVoice = ref(false)
|
||||
const recorder = useVoiceRecorder()
|
||||
const silenceDetector = useSilenceDetector()
|
||||
|
||||
async function toggleVoice() {
|
||||
if (transcribingVoice.value) return
|
||||
if (recorder.recording.value) {
|
||||
await stopRecording()
|
||||
} else {
|
||||
await startRecording()
|
||||
}
|
||||
}
|
||||
|
||||
async function startRecording() {
|
||||
if (!voiceEnabled.value || recorder.recording.value) return
|
||||
if (!recorder.isSupported) {
|
||||
useToastStore().show('Microphone requires HTTPS or localhost', 'error')
|
||||
return
|
||||
}
|
||||
await recorder.startRecording()
|
||||
if (recorder.error.value) {
|
||||
useToastStore().show(recorder.error.value, 'error')
|
||||
return
|
||||
}
|
||||
if (recorder.stream.value) {
|
||||
silenceDetector.start(recorder.stream.value, () => stopRecording())
|
||||
}
|
||||
}
|
||||
|
||||
async function stopRecording() {
|
||||
silenceDetector.stop()
|
||||
if (!recorder.recording.value) return
|
||||
transcribingVoice.value = true
|
||||
try {
|
||||
const blob = await recorder.stopRecording()
|
||||
// Pass last assistant message as context to reduce STT mishearings
|
||||
const msgs = store.currentConversation?.messages ?? []
|
||||
const lastAssistant = [...msgs].reverse().find(m => m.role === 'assistant')?.content
|
||||
const { transcript } = await transcribeAudio(blob, lastAssistant)
|
||||
if (transcript.trim()) {
|
||||
messageInput.value = transcript.trim()
|
||||
await nextTick()
|
||||
autoResize()
|
||||
onSubmit()
|
||||
}
|
||||
} catch { /* transcription failed silently */ }
|
||||
finally { transcribingVoice.value = false }
|
||||
}
|
||||
|
||||
// ── Exposed interface ─────────────────────────────────────────────────────────
|
||||
function focus() {
|
||||
inputEl.value?.focus()
|
||||
}
|
||||
|
||||
function prefill(text: string) {
|
||||
messageInput.value = text
|
||||
nextTick(() => {
|
||||
autoResize()
|
||||
inputEl.value?.focus()
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ focus, prefill })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="wrapperEl" class="chat-input-bar" :class="{ 'chat-input-bar--pill': pill }">
|
||||
<!-- Attached note pill -->
|
||||
<div v-if="attachedNote" class="attached-note">
|
||||
<span class="attached-note-pill">
|
||||
{{ attachedNote.title }}
|
||||
<button class="attached-note-remove" aria-label="Remove" @click="removeAttachedNote">×</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="input-row">
|
||||
<!-- Note picker -->
|
||||
<div class="note-picker-wrapper">
|
||||
<button
|
||||
class="btn-icon"
|
||||
@click="toggleNotePicker"
|
||||
:disabled="!store.chatReady"
|
||||
title="Attach a note"
|
||||
>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div v-if="showNotePicker" class="note-picker-dropdown">
|
||||
<input
|
||||
class="note-picker-search"
|
||||
v-model="noteSearchQuery"
|
||||
@input="onNoteSearchInput"
|
||||
placeholder="Search notes..."
|
||||
/>
|
||||
<div class="note-picker-results">
|
||||
<div
|
||||
v-for="note in noteSearchResults"
|
||||
:key="note.id"
|
||||
class="note-picker-item"
|
||||
@click="selectNote(note)"
|
||||
>{{ note.title || 'Untitled' }}</div>
|
||||
<div v-if="noteSearchLoading" class="note-picker-empty">Searching...</div>
|
||||
<div v-else-if="noteSearchQuery && !noteSearchResults.length" class="note-picker-empty">No notes found</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Textarea -->
|
||||
<textarea
|
||||
ref="inputEl"
|
||||
v-model="messageInput"
|
||||
@keydown="onInputKeydown"
|
||||
@input="autoResize"
|
||||
:placeholder="!store.chatReady ? 'Chat unavailable' : store.streaming ? 'Type to queue… (Enter to queue)' : placeholder"
|
||||
:disabled="!store.chatReady"
|
||||
rows="1"
|
||||
class="input-textarea"
|
||||
></textarea>
|
||||
|
||||
<!-- PTT mic -->
|
||||
<button
|
||||
v-if="voiceEnabled"
|
||||
class="btn-icon btn-mic"
|
||||
:class="{ 'mic-recording': recorder.recording.value, 'mic-transcribing': transcribingVoice }"
|
||||
@click.prevent="toggleVoice"
|
||||
:disabled="transcribingVoice || !store.chatReady"
|
||||
:title="recorder.recording.value ? 'Click to stop (or wait for silence)' : 'Click to speak'"
|
||||
:aria-label="recorder.recording.value ? 'Stop recording' : 'Start recording'"
|
||||
>
|
||||
<svg v-if="!transcribingVoice" width="17" height="17" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5zm6 6c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
|
||||
</svg>
|
||||
<svg v-else width="17" height="17" viewBox="0 0 24 24" fill="currentColor">
|
||||
<circle cx="12" cy="12" r="8" opacity="0.35"/><circle cx="12" cy="12" r="4"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Abort (streaming) or Send -->
|
||||
<button
|
||||
v-if="store.streaming"
|
||||
class="btn-abort-inline"
|
||||
@click="emit('abort')"
|
||||
title="Stop generation"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><rect width="14" height="14" rx="2"/></svg>
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="btn-send"
|
||||
@click="onSubmit"
|
||||
:disabled="!messageInput.trim() || !store.chatReady"
|
||||
>↑</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chat-input-bar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.attached-note {
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
.attached-note-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 0.15rem 0.4rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.attached-note-remove {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1;
|
||||
padding: 0 0.1rem;
|
||||
}
|
||||
.attached-note-remove:hover { color: #fff; }
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.5rem 0.5rem 0.5rem 0.75rem;
|
||||
background: var(--color-input-bar-bg);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px var(--color-shadow);
|
||||
}
|
||||
|
||||
.chat-input-bar--pill .input-row {
|
||||
border-radius: 24px;
|
||||
padding: 0.6rem 0.6rem 0.6rem 1rem;
|
||||
}
|
||||
|
||||
.input-textarea {
|
||||
flex: 1;
|
||||
resize: none;
|
||||
padding: 0.35rem 0.5rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-input-bar-text);
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.input-textarea::placeholder { color: var(--color-input-bar-placeholder); }
|
||||
.input-textarea:disabled { opacity: 0.5; }
|
||||
|
||||
.btn-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--color-input-bar-text);
|
||||
opacity: 0.6;
|
||||
padding: 0.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-icon:hover { opacity: 1; }
|
||||
.btn-icon:disabled { opacity: 0.3; cursor: default; }
|
||||
|
||||
.btn-mic.mic-recording { opacity: 1; color: #ef4444; }
|
||||
.btn-mic.mic-transcribing { opacity: 0.5; }
|
||||
|
||||
.note-picker-wrapper { position: relative; }
|
||||
.note-picker-dropdown {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 8px);
|
||||
left: 0;
|
||||
width: 260px;
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 4px 16px var(--color-shadow);
|
||||
z-index: 20;
|
||||
overflow: hidden;
|
||||
}
|
||||
.note-picker-search {
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.65rem;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
font-size: 0.85rem;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.note-picker-results { max-height: 180px; overflow-y: auto; }
|
||||
.note-picker-item {
|
||||
padding: 0.4rem 0.65rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.note-picker-item:hover { background: var(--color-bg-secondary); }
|
||||
.note-picker-empty { padding: 0.4rem 0.65rem; color: var(--color-text-muted); font-size: 0.8rem; }
|
||||
|
||||
.btn-send {
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #6366f1, #4f46e5);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
flex-shrink: 0;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
.btn-send:hover { box-shadow: 0 0 12px rgba(99, 102, 241, 0.5); }
|
||||
.btn-send:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
|
||||
|
||||
.btn-abort-inline {
|
||||
width: 28px;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-abort-inline:hover { border-color: #ef4444; color: #ef4444; }
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useChatStore } from '@/stores/chat'
|
||||
import { useSettingsStore } from '@/stores/settings'
|
||||
import { renderMarkdown } from '@/utils/markdown'
|
||||
import ToolCallCard from '@/components/ToolCallCard.vue'
|
||||
import ToolConfirmCard from '@/components/ToolConfirmCard.vue'
|
||||
|
||||
const store = useChatStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
const streamingRendered = computed(() => {
|
||||
if (!store.streamingContent) return ''
|
||||
return renderMarkdown(store.streamingContent)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chat-message role-assistant">
|
||||
<div class="message-bubble streaming-bubble">
|
||||
<div class="message-header">
|
||||
<span class="role-label">{{ settingsStore.assistantName }}</span>
|
||||
</div>
|
||||
<div v-if="store.streamingToolCalls.length" class="streaming-tool-calls">
|
||||
<ToolCallCard
|
||||
v-for="(tc, i) in store.streamingToolCalls"
|
||||
:key="i"
|
||||
:tool-call="tc"
|
||||
/>
|
||||
</div>
|
||||
<ToolConfirmCard
|
||||
v-if="store.streamingPendingTool"
|
||||
:pending-tool="store.streamingPendingTool"
|
||||
@accept="store.confirmTool(true)"
|
||||
@decline="store.confirmTool(false)"
|
||||
/>
|
||||
<div v-if="store.streamingStatus" class="streaming-status-line">
|
||||
<span class="streaming-status-dot"></span>
|
||||
{{ store.streamingStatus }}
|
||||
</div>
|
||||
<details
|
||||
v-if="store.streamingThinking"
|
||||
class="thinking-block"
|
||||
:open="!store.streamingContent"
|
||||
>
|
||||
<summary class="thinking-summary">Reasoning</summary>
|
||||
<pre class="thinking-text">{{ store.streamingThinking }}</pre>
|
||||
</details>
|
||||
<div class="message-content prose" v-html="streamingRendered"></div>
|
||||
<span
|
||||
v-if="!store.streamingStatus && !store.streamingThinking && !store.streamingContent"
|
||||
class="typing-indicator"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,351 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick } from "vue";
|
||||
import { apiGet } from "@/api/client";
|
||||
import { useChatStore } from "@/stores/chat";
|
||||
import type { Note } from "@/types/note";
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [payload: { content: string; contextNoteId?: number }];
|
||||
}>();
|
||||
|
||||
const store = useChatStore();
|
||||
|
||||
const messageInput = ref("");
|
||||
const inputEl = ref<HTMLTextAreaElement | null>(null);
|
||||
|
||||
// Note picker state
|
||||
const attachedNote = ref<{ id: number; title: string } | null>(null);
|
||||
const showNotePicker = ref(false);
|
||||
const noteSearchQuery = ref("");
|
||||
const noteSearchResults = ref<{ id: number; title: string }[]>([]);
|
||||
const noteSearchLoading = ref(false);
|
||||
let noteSearchTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
function onSubmit() {
|
||||
const content = messageInput.value.trim();
|
||||
if (!content) return;
|
||||
emit("submit", {
|
||||
content,
|
||||
contextNoteId: attachedNote.value?.id,
|
||||
});
|
||||
messageInput.value = "";
|
||||
attachedNote.value = null;
|
||||
resetTextareaHeight();
|
||||
}
|
||||
|
||||
function onInputKeydown(e: KeyboardEvent) {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
onSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
function autoResize() {
|
||||
const el = inputEl.value;
|
||||
if (!el) return;
|
||||
el.style.height = "auto";
|
||||
el.style.height = Math.min(el.scrollHeight, 120) + "px";
|
||||
}
|
||||
|
||||
function resetTextareaHeight() {
|
||||
const el = inputEl.value;
|
||||
if (!el) return;
|
||||
el.style.height = "auto";
|
||||
}
|
||||
|
||||
// Note picker
|
||||
function toggleNotePicker() {
|
||||
showNotePicker.value = !showNotePicker.value;
|
||||
if (showNotePicker.value) {
|
||||
noteSearchQuery.value = "";
|
||||
noteSearchResults.value = [];
|
||||
nextTick(() => {
|
||||
const el = document.querySelector(
|
||||
".dashboard-chat .note-picker-search"
|
||||
) as HTMLInputElement;
|
||||
el?.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function onNoteSearchInput() {
|
||||
if (noteSearchTimer) clearTimeout(noteSearchTimer);
|
||||
noteSearchTimer = setTimeout(async () => {
|
||||
const q = noteSearchQuery.value.trim();
|
||||
if (!q) {
|
||||
noteSearchResults.value = [];
|
||||
return;
|
||||
}
|
||||
noteSearchLoading.value = true;
|
||||
try {
|
||||
const data = await apiGet<{ notes: Note[] }>(
|
||||
`/api/notes?q=${encodeURIComponent(q)}&all=true&limit=5`
|
||||
);
|
||||
noteSearchResults.value = data.notes.map((n) => ({
|
||||
id: n.id,
|
||||
title: n.title,
|
||||
}));
|
||||
} catch {
|
||||
noteSearchResults.value = [];
|
||||
} finally {
|
||||
noteSearchLoading.value = false;
|
||||
}
|
||||
}, 250);
|
||||
}
|
||||
|
||||
function selectNote(note: { id: number; title: string }) {
|
||||
attachedNote.value = note;
|
||||
showNotePicker.value = false;
|
||||
}
|
||||
|
||||
function removeAttachedNote() {
|
||||
attachedNote.value = null;
|
||||
}
|
||||
|
||||
function focus() {
|
||||
inputEl.value?.focus();
|
||||
}
|
||||
|
||||
defineExpose({ focus });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dashboard-chat">
|
||||
<!-- Attached note pill -->
|
||||
<div v-if="attachedNote" class="attached-note">
|
||||
<span class="attached-note-pill">
|
||||
{{ attachedNote.title }}
|
||||
<button class="attached-note-remove" aria-label="Remove attached note" @click="removeAttachedNote">
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="chat-input-bar">
|
||||
<div class="note-picker-wrapper">
|
||||
<button
|
||||
class="btn-attach"
|
||||
@click="toggleNotePicker"
|
||||
:disabled="!store.chatReady"
|
||||
title="Attach a note"
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div v-if="showNotePicker" class="note-picker-dropdown">
|
||||
<input
|
||||
class="note-picker-search"
|
||||
v-model="noteSearchQuery"
|
||||
@input="onNoteSearchInput"
|
||||
placeholder="Search notes..."
|
||||
/>
|
||||
<div class="note-picker-results">
|
||||
<div
|
||||
v-for="note in noteSearchResults"
|
||||
:key="note.id"
|
||||
class="note-picker-item"
|
||||
@click="selectNote(note)"
|
||||
>
|
||||
{{ note.title || "Untitled" }}
|
||||
</div>
|
||||
<div v-if="noteSearchLoading" class="note-picker-empty">
|
||||
Searching...
|
||||
</div>
|
||||
<div
|
||||
v-else-if="noteSearchQuery && !noteSearchResults.length"
|
||||
class="note-picker-empty"
|
||||
>
|
||||
No notes found
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
ref="inputEl"
|
||||
v-model="messageInput"
|
||||
@keydown="onInputKeydown"
|
||||
@input="autoResize"
|
||||
:placeholder="
|
||||
!store.chatReady ? 'Chat unavailable'
|
||||
: store.streaming ? 'Type to queue… (Enter to queue)'
|
||||
: 'Start a new chat… (Enter to send)'
|
||||
"
|
||||
:disabled="!store.chatReady"
|
||||
rows="1"
|
||||
></textarea>
|
||||
|
||||
<button
|
||||
class="btn-send"
|
||||
@click="onSubmit"
|
||||
:disabled="!messageInput.trim() || !store.chatReady"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-chat {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.attached-note {
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
.attached-note-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 0.2rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.attached-note-remove {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
padding: 0 0.15rem;
|
||||
}
|
||||
.attached-note-remove:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.chat-input-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.5rem 0.5rem 0.75rem;
|
||||
background: var(--color-input-bar-bg);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 2px 12px var(--color-shadow);
|
||||
}
|
||||
|
||||
.chat-input-bar textarea {
|
||||
flex: 1;
|
||||
resize: none;
|
||||
padding: 0.4rem 0.5rem;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
background: transparent;
|
||||
color: var(--color-input-bar-text);
|
||||
outline: none;
|
||||
max-height: 120px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.chat-input-bar textarea::placeholder {
|
||||
color: var(--color-input-bar-placeholder);
|
||||
}
|
||||
.chat-input-bar textarea:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Note picker */
|
||||
.note-picker-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.btn-attach {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--color-input-bar-text);
|
||||
opacity: 0.6;
|
||||
padding: 0.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn-attach:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.btn-attach:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
.note-picker-dropdown {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 8px);
|
||||
left: 0;
|
||||
width: 280px;
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 4px 16px var(--color-shadow);
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
.note-picker-search {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.note-picker-results {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.note-picker-item {
|
||||
padding: 0.5rem 0.75rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.note-picker-item:hover {
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
.note-picker-empty {
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.btn-send {
|
||||
width: 34px;
|
||||
min-width: 34px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-send:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: default;
|
||||
}
|
||||
</style>
|
||||
@@ -68,9 +68,11 @@ function resetForm() {
|
||||
if (props.event) {
|
||||
title.value = props.event.title;
|
||||
allDay.value = props.event.all_day;
|
||||
startDate.value = dateFromIso(props.event.start_dt);
|
||||
// All-day events: use UTC date string directly to avoid timezone shifting
|
||||
// (UTC midnight parsed through new Date() becomes the previous day in UTC-X zones)
|
||||
startDate.value = props.event.all_day ? props.event.start_dt.slice(0, 10) : dateFromIso(props.event.start_dt);
|
||||
startTime.value = props.event.all_day ? "" : timeFromIso(props.event.start_dt);
|
||||
endDate.value = props.event.end_dt ? dateFromIso(props.event.end_dt) : "";
|
||||
endDate.value = props.event.end_dt ? (props.event.all_day ? props.event.end_dt.slice(0, 10) : dateFromIso(props.event.end_dt)) : "";
|
||||
endTime.value = props.event.end_dt && !props.event.all_day ? timeFromIso(props.event.end_dt) : "";
|
||||
description.value = props.event.description || "";
|
||||
location.value = props.event.location || "";
|
||||
|
||||
@@ -0,0 +1,171 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: Record<string, unknown> | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "update:modelValue", val: Record<string, unknown> | null): void;
|
||||
}>();
|
||||
|
||||
type RecurrenceType = "none" | "interval" | "calendar";
|
||||
type IntervalUnit = "day" | "week" | "month" | "year";
|
||||
type CalendarUnit = "month" | "year";
|
||||
|
||||
const rType = ref<RecurrenceType>("none");
|
||||
const intervalEvery = ref(1);
|
||||
const intervalUnit = ref<IntervalUnit>("week");
|
||||
const calendarUnit = ref<CalendarUnit>("month");
|
||||
const calendarDay = ref(1);
|
||||
const calendarMonth = ref(1);
|
||||
|
||||
function ruleFromState(): Record<string, unknown> | null {
|
||||
if (rType.value === "none") return null;
|
||||
if (rType.value === "interval") {
|
||||
return { type: "interval", every: intervalEvery.value, unit: intervalUnit.value };
|
||||
}
|
||||
// calendar
|
||||
const rule: Record<string, unknown> = {
|
||||
type: "calendar",
|
||||
unit: calendarUnit.value,
|
||||
day_of_month: calendarDay.value,
|
||||
};
|
||||
if (calendarUnit.value === "year") {
|
||||
rule.month = calendarMonth.value;
|
||||
}
|
||||
return rule;
|
||||
}
|
||||
|
||||
function loadFromRule(rule: Record<string, unknown> | null) {
|
||||
if (!rule) {
|
||||
rType.value = "none";
|
||||
return;
|
||||
}
|
||||
const t = rule.type as string;
|
||||
if (t === "interval") {
|
||||
rType.value = "interval";
|
||||
intervalEvery.value = (rule.every as number) ?? 1;
|
||||
intervalUnit.value = (rule.unit as IntervalUnit) ?? "week";
|
||||
} else if (t === "calendar") {
|
||||
rType.value = "calendar";
|
||||
calendarUnit.value = (rule.unit as CalendarUnit) ?? "month";
|
||||
calendarDay.value = (rule.day_of_month as number) ?? 1;
|
||||
calendarMonth.value = (rule.month as number) ?? 1;
|
||||
} else {
|
||||
rType.value = "none";
|
||||
}
|
||||
}
|
||||
|
||||
// Load initial value
|
||||
loadFromRule(props.modelValue);
|
||||
|
||||
// Watch for external changes (e.g., task loaded)
|
||||
watch(() => props.modelValue, (val) => {
|
||||
loadFromRule(val);
|
||||
}, { deep: true });
|
||||
|
||||
// Emit on any state change
|
||||
function onChange() {
|
||||
emit("update:modelValue", ruleFromState());
|
||||
}
|
||||
|
||||
const monthNames = [
|
||||
"January","February","March","April","May","June",
|
||||
"July","August","September","October","November","December",
|
||||
];
|
||||
|
||||
const calendarDayMax = computed(() =>
|
||||
calendarUnit.value === "month" ? 28 : 28
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rec-editor">
|
||||
<select v-model="rType" class="sb-select" @change="onChange">
|
||||
<option value="none">No recurrence</option>
|
||||
<option value="interval">Every N days/weeks/months</option>
|
||||
<option value="calendar">On a calendar date</option>
|
||||
</select>
|
||||
|
||||
<div v-if="rType === 'interval'" class="rec-row">
|
||||
<span class="rec-label">Every</span>
|
||||
<input
|
||||
v-model.number="intervalEvery"
|
||||
type="number"
|
||||
min="1"
|
||||
max="365"
|
||||
class="rec-num-input"
|
||||
@input="onChange"
|
||||
/>
|
||||
<select v-model="intervalUnit" class="sb-select rec-unit" @change="onChange">
|
||||
<option value="day">day(s)</option>
|
||||
<option value="week">week(s)</option>
|
||||
<option value="month">month(s)</option>
|
||||
<option value="year">year(s)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div v-if="rType === 'calendar'" class="rec-row rec-col">
|
||||
<div class="rec-row">
|
||||
<span class="rec-label">Unit</span>
|
||||
<select v-model="calendarUnit" class="sb-select" @change="onChange">
|
||||
<option value="month">Monthly</option>
|
||||
<option value="year">Yearly</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="rec-row">
|
||||
<span class="rec-label">Day</span>
|
||||
<input
|
||||
v-model.number="calendarDay"
|
||||
type="number"
|
||||
min="1"
|
||||
:max="calendarDayMax"
|
||||
class="rec-num-input"
|
||||
@input="onChange"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="calendarUnit === 'year'" class="rec-row">
|
||||
<span class="rec-label">Month</span>
|
||||
<select v-model.number="calendarMonth" class="sb-select" @change="onChange">
|
||||
<option v-for="(name, i) in monthNames" :key="i + 1" :value="i + 1">{{ name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.rec-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.rec-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.rec-col {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.rec-label {
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-text-muted);
|
||||
min-width: 2.5rem;
|
||||
}
|
||||
.rec-num-input {
|
||||
width: 4rem;
|
||||
padding: 0.25rem 0.4rem;
|
||||
border: 1px solid var(--color-input-border, var(--color-border));
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-size: 0.85rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
.rec-num-input:focus { outline: none; border-color: var(--color-primary); }
|
||||
.rec-unit { min-width: 6rem; }
|
||||
</style>
|
||||
@@ -138,7 +138,6 @@ onMounted(async () => {
|
||||
<ul v-if="userResults.length" class="user-results">
|
||||
<li v-for="u in userResults" :key="u.id" @click="selectUser(u)" class="user-result-item">
|
||||
<span class="user-result-name">{{ u.username }}</span>
|
||||
<span class="user-result-email">{{ u.email }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,7 @@ const labels: Record<TaskStatus, string> = {
|
||||
todo: "Todo",
|
||||
in_progress: "In Progress",
|
||||
done: "Done",
|
||||
cancelled: "Cancelled",
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -48,6 +49,10 @@ const labels: Record<TaskStatus, string> = {
|
||||
background: color-mix(in srgb, var(--color-status-done-bg) 78%, var(--color-status-done) 22%);
|
||||
color: color-mix(in srgb, var(--color-status-done) 85%, #000 15%);
|
||||
}
|
||||
.status-cancelled {
|
||||
background: color-mix(in srgb, var(--color-bg-secondary) 78%, var(--color-text-muted) 22%);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -20,18 +20,21 @@ const statusCycle: Record<TaskStatus, TaskStatus> = {
|
||||
todo: "in_progress",
|
||||
in_progress: "done",
|
||||
done: "todo",
|
||||
cancelled: "todo",
|
||||
};
|
||||
|
||||
const statusDotClass: Record<TaskStatus, string> = {
|
||||
todo: "dot-todo",
|
||||
in_progress: "dot-in-progress",
|
||||
done: "dot-done",
|
||||
cancelled: "dot-cancelled",
|
||||
};
|
||||
|
||||
const statusTitle: Record<TaskStatus, string> = {
|
||||
todo: "Todo — click to mark In Progress",
|
||||
in_progress: "In Progress — click to mark Done",
|
||||
done: "Done — click to mark Todo",
|
||||
cancelled: "Cancelled — click to mark Todo",
|
||||
};
|
||||
|
||||
function cycleStatus() {
|
||||
@@ -152,6 +155,9 @@ function isOverdue(): boolean {
|
||||
.dot-done {
|
||||
background: var(--color-status-done, #22c55e);
|
||||
}
|
||||
.dot-cancelled {
|
||||
background: var(--color-status-cancelled, #6b7280);
|
||||
}
|
||||
|
||||
.task-title-compact {
|
||||
font-size: 0.9rem;
|
||||
|
||||
@@ -270,8 +270,11 @@ async function openEventSlideOver(id: number | undefined) {
|
||||
}
|
||||
}
|
||||
|
||||
function closeEventSlideOver() {
|
||||
function closeEventSlideOver(changed = false) {
|
||||
eventSlideOverOpen.value = false;
|
||||
if (changed) {
|
||||
document.dispatchEvent(new Event("fable:calendar-changed"));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -522,9 +525,9 @@ function closeEventSlideOver() {
|
||||
:event="eventSlideOverEntry"
|
||||
initial-date=""
|
||||
@close="closeEventSlideOver"
|
||||
@created="closeEventSlideOver"
|
||||
@updated="closeEventSlideOver"
|
||||
@deleted="closeEventSlideOver"
|
||||
@created="() => closeEventSlideOver(true)"
|
||||
@updated="() => closeEventSlideOver(true)"
|
||||
@deleted="() => closeEventSlideOver(true)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -6,6 +6,9 @@ interface ForecastDay {
|
||||
condition: string
|
||||
high: number
|
||||
low: number
|
||||
precip_probability: number | null
|
||||
precip_mm: number | null
|
||||
windspeed_max: number
|
||||
}
|
||||
|
||||
interface WeatherData {
|
||||
@@ -17,6 +20,7 @@ interface WeatherData {
|
||||
today_low: number | null
|
||||
yesterday_high: number | null
|
||||
yesterday_low: number | null
|
||||
wind_unit?: string
|
||||
forecast: ForecastDay[]
|
||||
}
|
||||
|
||||
@@ -25,6 +29,23 @@ const props = defineProps<{
|
||||
tempUnit?: string
|
||||
}>()
|
||||
|
||||
function weatherIcon(condition: string): string {
|
||||
const c = condition.toLowerCase()
|
||||
if (c.includes('thunderstorm')) return '⛈️'
|
||||
if (c.includes('hail')) return '🌨️'
|
||||
if (c.includes('snow showers')) return '🌨️'
|
||||
if (c.includes('snow')) return '❄️'
|
||||
if (c.includes('rain showers: violent')) return '⛈️'
|
||||
if (c.includes('rain showers')) return '🌦️'
|
||||
if (c.includes('drizzle') || c.includes('rain')) return '🌧️'
|
||||
if (c.includes('fog')) return '🌫️'
|
||||
if (c.includes('overcast')) return '☁️'
|
||||
if (c.includes('partly cloudy')) return '⛅'
|
||||
if (c.includes('mainly clear')) return '🌤️'
|
||||
if (c.includes('clear')) return '☀️'
|
||||
return '🌡️'
|
||||
}
|
||||
|
||||
const unit = computed(() => props.tempUnit ?? 'C')
|
||||
|
||||
const tempDelta = computed(() => {
|
||||
@@ -56,6 +77,7 @@ const fetchedAtLabel = computed(() => {
|
||||
<span class="weather-fetched-at">as of {{ fetchedAtLabel }}</span>
|
||||
</div>
|
||||
<div class="weather-current">
|
||||
<span class="weather-icon">{{ weatherIcon(weather.condition) }}</span>
|
||||
<span class="weather-temp">{{ weather.current_temp }}°{{ unit }}</span>
|
||||
<span class="weather-condition">{{ weather.condition }}</span>
|
||||
</div>
|
||||
@@ -66,8 +88,17 @@ const fetchedAtLabel = computed(() => {
|
||||
<div class="weather-forecast" v-if="weather.forecast.length">
|
||||
<div v-for="day in weather.forecast" :key="day.day" class="weather-forecast-day">
|
||||
<span class="forecast-day-name">{{ day.day }}</span>
|
||||
<span class="forecast-icon">{{ weatherIcon(day.condition) }}</span>
|
||||
<span class="forecast-condition">{{ day.condition }}</span>
|
||||
<span class="forecast-temps">{{ day.high }}° / {{ day.low }}°</span>
|
||||
<span v-if="day.precip_probability != null && day.precip_probability > 0" class="forecast-precip">
|
||||
💧 {{ day.precip_probability }}%
|
||||
</span>
|
||||
<span v-else-if="day.precip_mm != null && day.precip_mm > 0" class="forecast-precip">
|
||||
💧 {{ day.precip_mm.toFixed(1) }}mm
|
||||
</span>
|
||||
<span v-else class="forecast-precip forecast-precip--dry">💧 —</span>
|
||||
<span class="forecast-wind">💨 {{ day.windspeed_max }} {{ weather.wind_unit ?? 'km/h' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,6 +141,11 @@ const fetchedAtLabel = computed(() => {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.weather-icon {
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.weather-temp {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
@@ -153,16 +189,34 @@ const fetchedAtLabel = computed(() => {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.forecast-icon {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.forecast-condition {
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.forecast-temps {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.forecast-precip,
|
||||
.forecast-wind {
|
||||
font-size: 0.72rem;
|
||||
white-space: nowrap;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.forecast-precip--dry {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.weather-unavailable {
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
|
||||
@@ -293,6 +293,8 @@ onMounted(async () => {
|
||||
});
|
||||
|
||||
onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
|
||||
|
||||
defineExpose({ reload: loadProjectNotes });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const LISTEN_MODE_KEY = 'fa_listen_mode'
|
||||
|
||||
// Shared across all views — persisted to localStorage
|
||||
const _listenMode = ref<boolean>(localStorage.getItem(LISTEN_MODE_KEY) === 'true')
|
||||
|
||||
watch(_listenMode, (v) => {
|
||||
localStorage.setItem(LISTEN_MODE_KEY, String(v))
|
||||
})
|
||||
|
||||
export function useListenMode() {
|
||||
return _listenMode
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import { ref, readonly } from 'vue'
|
||||
|
||||
export interface SilenceDetectorOptions {
|
||||
thresholdDb?: number // default -40
|
||||
silenceDurationMs?: number // default 1500
|
||||
minRecordingMs?: number // default 500
|
||||
}
|
||||
|
||||
export function useSilenceDetector(options: SilenceDetectorOptions = {}) {
|
||||
const {
|
||||
thresholdDb = -40,
|
||||
silenceDurationMs = 1500,
|
||||
minRecordingMs = 500,
|
||||
} = options
|
||||
|
||||
const amplitude = ref(0)
|
||||
let audioCtx: AudioContext | null = null
|
||||
let intervalId: ReturnType<typeof setInterval> | null = null
|
||||
let silenceMs = 0
|
||||
let startedAt = 0
|
||||
|
||||
function start(stream: MediaStream, onSilence: () => void): void {
|
||||
stop()
|
||||
audioCtx = new AudioContext()
|
||||
// Some browsers start AudioContext in "suspended" state — resume so
|
||||
// getByteFrequencyData returns real values instead of all zeros.
|
||||
audioCtx.resume().catch(() => {})
|
||||
const source = audioCtx.createMediaStreamSource(stream)
|
||||
const analyser = audioCtx.createAnalyser()
|
||||
analyser.fftSize = 256
|
||||
source.connect(analyser)
|
||||
|
||||
const data = new Uint8Array(analyser.frequencyBinCount)
|
||||
silenceMs = 0
|
||||
startedAt = Date.now()
|
||||
|
||||
intervalId = setInterval(() => {
|
||||
analyser.getByteFrequencyData(data)
|
||||
const rms = Math.sqrt(data.reduce((s, v) => s + v * v, 0) / data.length) / 255
|
||||
amplitude.value = rms
|
||||
|
||||
const db = rms > 0 ? 20 * Math.log10(rms) : -100
|
||||
if (db < thresholdDb) {
|
||||
silenceMs += 100
|
||||
if (silenceMs >= silenceDurationMs && Date.now() - startedAt >= minRecordingMs) {
|
||||
stop()
|
||||
onSilence()
|
||||
}
|
||||
} else {
|
||||
silenceMs = 0
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function stop(): void {
|
||||
if (intervalId !== null) {
|
||||
clearInterval(intervalId)
|
||||
intervalId = null
|
||||
}
|
||||
if (audioCtx) {
|
||||
audioCtx.close().catch(() => {})
|
||||
audioCtx = null
|
||||
}
|
||||
amplitude.value = 0
|
||||
silenceMs = 0
|
||||
}
|
||||
|
||||
return { amplitude: readonly(amplitude), start, stop }
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import type { Ref, ComputedRef } from 'vue'
|
||||
import { synthesiseSpeech } from '@/api/client'
|
||||
import { useVoiceAudio } from '@/composables/useVoiceAudio'
|
||||
|
||||
/** Minimum stripped character count to bother synthesizing. */
|
||||
const MIN_CHARS = 3
|
||||
|
||||
/** Matches sentence-terminal punctuation followed by whitespace or end-of-string. */
|
||||
const SENTENCE_BOUNDARY = /[.!?]+(?=\s|$)/
|
||||
|
||||
function stripMarkdown(text: string): string {
|
||||
return text
|
||||
.replace(/```[\s\S]*?```/g, '')
|
||||
.replace(/`[^`]+`/g, (m) => m.slice(1, -1))
|
||||
.replace(/#{1,6}\s+/g, '')
|
||||
.replace(/\*\*([^*]+)\*\*/g, '$1')
|
||||
.replace(/\*([^*]+)\*/g, '$1')
|
||||
.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
|
||||
.replace(/^\s*[-*+]\s+/gm, '')
|
||||
.replace(/\n{2,}/g, ' ')
|
||||
.trim()
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract completed sentences from `text` using SENTENCE_BOUNDARY.
|
||||
* Returns the sentences found and the unconsumed remainder.
|
||||
*/
|
||||
function extractSentences(text: string): { sentences: string[]; remainder: string } {
|
||||
const sentences: string[] = []
|
||||
let remaining = text
|
||||
let match: RegExpExecArray | null
|
||||
|
||||
while ((match = SENTENCE_BOUNDARY.exec(remaining)) !== null) {
|
||||
const boundary = match.index + match[0].length
|
||||
const sentence = remaining.slice(0, boundary).trim()
|
||||
if (sentence) sentences.push(sentence)
|
||||
remaining = remaining.slice(boundary)
|
||||
}
|
||||
|
||||
return { sentences, remainder: remaining }
|
||||
}
|
||||
|
||||
export interface UseStreamingTtsOptions {
|
||||
streamingContent: Ref<string> | ComputedRef<string>
|
||||
streaming: Ref<boolean> | ComputedRef<boolean>
|
||||
enabled: Ref<boolean> | ComputedRef<boolean>
|
||||
}
|
||||
|
||||
export interface UseStreamingTtsReturn {
|
||||
/** True while any synthesis request is in-flight or audio is playing. */
|
||||
speaking: ComputedRef<boolean>
|
||||
/** Cancel all in-flight synthesis/playback and clear the queue. */
|
||||
stop: () => void
|
||||
/** Speak a complete text through the same sentence-chunking pipeline. */
|
||||
speak: (text: string) => void
|
||||
}
|
||||
|
||||
export function useStreamingTts(options: UseStreamingTtsOptions): UseStreamingTtsReturn {
|
||||
const { streamingContent, streaming, enabled } = options
|
||||
const audio = useVoiceAudio()
|
||||
|
||||
let sentenceBuffer = ''
|
||||
let lastSeenLength = 0
|
||||
let abortId = 0
|
||||
let playQueue: Promise<void> = Promise.resolve()
|
||||
const pendingCount = ref(0)
|
||||
|
||||
const speaking = computed(() => pendingCount.value > 0 || audio.playing.value)
|
||||
|
||||
function stop(): void {
|
||||
abortId++
|
||||
sentenceBuffer = ''
|
||||
lastSeenLength = 0
|
||||
playQueue = Promise.resolve()
|
||||
audio.stop()
|
||||
pendingCount.value = 0
|
||||
}
|
||||
|
||||
async function enqueueSentence(sentence: string, myAbortId: number): Promise<void> {
|
||||
const stripped = stripMarkdown(sentence)
|
||||
if (stripped.length < MIN_CHARS) return
|
||||
|
||||
pendingCount.value++
|
||||
let blob: Blob | null = null
|
||||
try {
|
||||
blob = await synthesiseSpeech(stripped)
|
||||
} catch (e) {
|
||||
const errMsg = e instanceof Error ? e.message : String(e)
|
||||
console.warn('[StreamingTTS] Synthesis failed, retrying', {
|
||||
chars: stripped.length,
|
||||
preview: stripped.slice(0, 80),
|
||||
error: errMsg,
|
||||
})
|
||||
try {
|
||||
blob = await synthesiseSpeech(stripped)
|
||||
} catch (e2) {
|
||||
const errMsg2 = e2 instanceof Error ? e2.message : String(e2)
|
||||
console.warn('[StreamingTTS] Retry failed, sentence dropped', {
|
||||
chars: stripped.length,
|
||||
preview: stripped.slice(0, 80),
|
||||
error: errMsg2,
|
||||
})
|
||||
}
|
||||
} finally {
|
||||
pendingCount.value--
|
||||
}
|
||||
|
||||
if (!blob) return
|
||||
|
||||
// Capture blob for the closure — TS can't narrow after async gap
|
||||
const resolvedBlob = blob
|
||||
playQueue = playQueue.then(async () => {
|
||||
if (abortId !== myAbortId) return
|
||||
await audio.play(resolvedBlob)
|
||||
})
|
||||
}
|
||||
|
||||
function dispatchBuffer(flush: boolean): void {
|
||||
if (!enabled.value) return
|
||||
const myAbortId = abortId
|
||||
const { sentences, remainder } = extractSentences(sentenceBuffer)
|
||||
sentenceBuffer = flush ? '' : remainder
|
||||
for (const sentence of sentences) {
|
||||
enqueueSentence(sentence, myAbortId)
|
||||
}
|
||||
if (flush && remainder.trim().length >= MIN_CHARS) {
|
||||
enqueueSentence(remainder.trim(), myAbortId)
|
||||
}
|
||||
}
|
||||
|
||||
// Watch accumulating content — extract new characters since last check
|
||||
watch(streamingContent, (newContent) => {
|
||||
if (!enabled.value) return
|
||||
const delta = newContent.slice(lastSeenLength)
|
||||
lastSeenLength = newContent.length
|
||||
sentenceBuffer += delta
|
||||
dispatchBuffer(false)
|
||||
})
|
||||
|
||||
// Watch streaming flag — stop on new message start, flush on end
|
||||
watch(streaming, (isStreaming) => {
|
||||
if (!enabled.value) return
|
||||
if (isStreaming) {
|
||||
// New message starting — cancel previous response's audio
|
||||
stop()
|
||||
} else {
|
||||
// Stream ended — flush any remaining fragment
|
||||
dispatchBuffer(true)
|
||||
lastSeenLength = 0
|
||||
}
|
||||
})
|
||||
|
||||
function speak(text: string): void {
|
||||
stop()
|
||||
if (!text.trim()) return
|
||||
const myAbortId = abortId
|
||||
const { sentences, remainder } = extractSentences(text)
|
||||
for (const sentence of sentences) {
|
||||
enqueueSentence(sentence, myAbortId)
|
||||
}
|
||||
if (remainder.trim().length >= MIN_CHARS) {
|
||||
enqueueSentence(remainder.trim(), myAbortId)
|
||||
}
|
||||
}
|
||||
|
||||
return { speaking, stop, speak }
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { ref, readonly } from 'vue'
|
||||
|
||||
const VOLUME_KEY = 'fa_voice_volume'
|
||||
|
||||
// Shared volume across all instances — persisted to localStorage per device
|
||||
const _volume = ref<number>(parseFloat(localStorage.getItem(VOLUME_KEY) ?? '1.0'))
|
||||
|
||||
export function useVoiceAudio() {
|
||||
const playing = ref(false)
|
||||
const isSupported = typeof AudioContext !== 'undefined' || typeof (window as unknown as Record<string, unknown>).webkitAudioContext !== 'undefined'
|
||||
|
||||
let audioCtx: AudioContext | null = null
|
||||
let currentSource: AudioBufferSourceNode | null = null
|
||||
|
||||
function _getCtx(): AudioContext {
|
||||
if (!audioCtx || audioCtx.state === 'closed') {
|
||||
const Ctx = window.AudioContext ?? (window as unknown as Record<string, typeof AudioContext>).webkitAudioContext
|
||||
audioCtx = new Ctx()
|
||||
}
|
||||
return audioCtx
|
||||
}
|
||||
|
||||
async function play(blob: Blob): Promise<void> {
|
||||
stop()
|
||||
const ctx = _getCtx()
|
||||
if (ctx.state === 'suspended') await ctx.resume()
|
||||
|
||||
const arrayBuffer = await blob.arrayBuffer()
|
||||
const audioBuffer = await ctx.decodeAudioData(arrayBuffer)
|
||||
|
||||
const source = ctx.createBufferSource()
|
||||
source.buffer = audioBuffer
|
||||
|
||||
const gain = ctx.createGain()
|
||||
gain.gain.value = _volume.value
|
||||
source.connect(gain)
|
||||
gain.connect(ctx.destination)
|
||||
|
||||
currentSource = source
|
||||
playing.value = true
|
||||
|
||||
return new Promise<void>((resolve) => {
|
||||
source.onended = () => {
|
||||
playing.value = false
|
||||
currentSource = null
|
||||
resolve()
|
||||
}
|
||||
source.start(0)
|
||||
})
|
||||
}
|
||||
|
||||
function stop(): void {
|
||||
if (currentSource) {
|
||||
try { currentSource.stop() } catch { /* already stopped */ }
|
||||
currentSource = null
|
||||
}
|
||||
playing.value = false
|
||||
}
|
||||
|
||||
return {
|
||||
playing: readonly(playing),
|
||||
volume: _volume,
|
||||
isSupported,
|
||||
play,
|
||||
stop,
|
||||
}
|
||||
}
|
||||
|
||||
export function setVoiceVolume(v: number) {
|
||||
_volume.value = Math.max(0, Math.min(1, v))
|
||||
localStorage.setItem(VOLUME_KEY, String(_volume.value))
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import { ref, readonly, type Ref } from 'vue'
|
||||
|
||||
/**
|
||||
* Push-to-talk recorder wrapping the browser MediaRecorder API.
|
||||
*
|
||||
* Usage:
|
||||
* const { recording, error, isSupported, startRecording, stopRecording } = useVoiceRecorder()
|
||||
* await startRecording()
|
||||
* const blob = await stopRecording() // resolves with the recorded audio Blob
|
||||
*/
|
||||
export function useVoiceRecorder() {
|
||||
const recording = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const isSupported = typeof MediaRecorder !== 'undefined' && !!navigator.mediaDevices?.getUserMedia
|
||||
|
||||
let mediaRecorder: MediaRecorder | null = null
|
||||
let chunks: Blob[] = []
|
||||
const streamRef = ref<MediaStream | null>(null)
|
||||
let resolveStop: ((blob: Blob) => void) | null = null
|
||||
let rejectStop: ((err: Error) => void) | null = null
|
||||
|
||||
async function startRecording(): Promise<void> {
|
||||
error.value = null
|
||||
if (!isSupported) {
|
||||
error.value = 'Audio recording is not supported in this browser'
|
||||
return
|
||||
}
|
||||
if (recording.value) return
|
||||
|
||||
try {
|
||||
streamRef.value = await navigator.mediaDevices.getUserMedia({ audio: true })
|
||||
} catch (e) {
|
||||
error.value = 'Microphone access denied'
|
||||
return
|
||||
}
|
||||
|
||||
chunks = []
|
||||
const mimeType = MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
|
||||
? 'audio/webm;codecs=opus'
|
||||
: MediaRecorder.isTypeSupported('audio/webm')
|
||||
? 'audio/webm'
|
||||
: ''
|
||||
|
||||
mediaRecorder = mimeType ? new MediaRecorder(streamRef.value!, { mimeType }) : new MediaRecorder(streamRef.value!)
|
||||
|
||||
mediaRecorder.ondataavailable = (e) => {
|
||||
if (e.data.size > 0) chunks.push(e.data)
|
||||
}
|
||||
|
||||
mediaRecorder.onstop = () => {
|
||||
const blob = new Blob(chunks, { type: mediaRecorder?.mimeType ?? 'audio/webm' })
|
||||
chunks = []
|
||||
streamRef.value?.getTracks().forEach((t) => t.stop())
|
||||
streamRef.value = null
|
||||
recording.value = false
|
||||
resolveStop?.(blob)
|
||||
resolveStop = null
|
||||
rejectStop = null
|
||||
}
|
||||
|
||||
mediaRecorder.onerror = () => {
|
||||
recording.value = false
|
||||
error.value = 'Recording error'
|
||||
rejectStop?.(new Error('MediaRecorder error'))
|
||||
resolveStop = null
|
||||
rejectStop = null
|
||||
}
|
||||
|
||||
mediaRecorder.start(100) // collect in 100ms chunks
|
||||
recording.value = true
|
||||
}
|
||||
|
||||
function stopRecording(): Promise<Blob> {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!mediaRecorder || !recording.value) {
|
||||
reject(new Error('Not recording'))
|
||||
return
|
||||
}
|
||||
resolveStop = resolve
|
||||
rejectStop = reject
|
||||
mediaRecorder.stop()
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
recording: readonly(recording),
|
||||
error: readonly(error),
|
||||
isSupported,
|
||||
startRecording,
|
||||
stopRecording,
|
||||
stream: readonly(streamRef) as Readonly<Ref<MediaStream | null>>,
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import HomeView from "@/views/HomeView.vue";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
|
||||
const router = createRouter({
|
||||
@@ -7,8 +6,12 @@ const router = createRouter({
|
||||
routes: [
|
||||
{
|
||||
path: "/",
|
||||
name: "home",
|
||||
component: HomeView,
|
||||
name: "knowledge",
|
||||
component: () => import("@/views/KnowledgeView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/knowledge",
|
||||
redirect: "/",
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
@@ -120,6 +123,11 @@ const router = createRouter({
|
||||
name: "briefing",
|
||||
component: () => import("@/views/BriefingView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/news",
|
||||
name: "news",
|
||||
component: () => import("@/views/NewsView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/settings",
|
||||
name: "settings",
|
||||
|
||||
@@ -80,6 +80,8 @@ export const useNotesStore = defineStore("notes", () => {
|
||||
tags?: string[];
|
||||
project_id?: number | null;
|
||||
milestone_id?: number | null;
|
||||
note_type?: string;
|
||||
metadata?: Record<string, string> | null;
|
||||
}): Promise<Note> {
|
||||
try {
|
||||
return await apiPost<Note>("/api/notes", data);
|
||||
@@ -91,7 +93,7 @@ export const useNotesStore = defineStore("notes", () => {
|
||||
|
||||
async function updateNote(
|
||||
id: number,
|
||||
data: Partial<Pick<Note, "title" | "body" | "tags" | "project_id" | "milestone_id">>
|
||||
data: Partial<Pick<Note, "title" | "body" | "tags" | "project_id" | "milestone_id" | "note_type" | "metadata">>
|
||||
): Promise<Note> {
|
||||
try {
|
||||
const note = await apiPut<Note>(`/api/notes/${id}`, data);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { ref, computed } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
import { apiGet, apiPut } from "@/api/client";
|
||||
import { apiGet, apiPut, getVoiceStatus } from "@/api/client";
|
||||
import { useToastStore } from "@/stores/toast";
|
||||
import type { AppSettings } from "@/types/settings";
|
||||
|
||||
@@ -16,6 +16,24 @@ export const useSettingsStore = defineStore("settings", () => {
|
||||
() => settings.value.default_model || ""
|
||||
);
|
||||
|
||||
// Voice status — checked once on login, refreshable from Settings
|
||||
const voiceEnabled = ref(false);
|
||||
const voiceSttReady = ref(false);
|
||||
const voiceTtsReady = ref(false);
|
||||
|
||||
async function checkVoiceStatus() {
|
||||
try {
|
||||
const s = await getVoiceStatus();
|
||||
voiceEnabled.value = s.enabled;
|
||||
voiceSttReady.value = s.enabled && s.stt;
|
||||
voiceTtsReady.value = s.enabled && s.tts;
|
||||
} catch {
|
||||
voiceEnabled.value = false;
|
||||
voiceSttReady.value = false;
|
||||
voiceTtsReady.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchSettings() {
|
||||
loading.value = true;
|
||||
try {
|
||||
@@ -44,6 +62,10 @@ export const useSettingsStore = defineStore("settings", () => {
|
||||
loading,
|
||||
assistantName,
|
||||
defaultModel,
|
||||
voiceEnabled,
|
||||
voiceSttReady,
|
||||
voiceTtsReady,
|
||||
checkVoiceStatus,
|
||||
fetchSettings,
|
||||
updateSettings,
|
||||
};
|
||||
|
||||
@@ -12,8 +12,8 @@ export const useTasksStore = defineStore("tasks", () => {
|
||||
|
||||
// Filter / pagination / sort state
|
||||
const activeTagFilters = ref<string[]>([]);
|
||||
const statusFilter = ref<TaskStatus | "">("");
|
||||
const priorityFilter = ref<TaskPriority | "">("");
|
||||
const statusFilter = ref<TaskStatus[]>([]);
|
||||
const priorityFilter = ref<TaskPriority[]>([]);
|
||||
const limit = ref(20);
|
||||
const offset = ref(0);
|
||||
const sortField = ref("updated_at");
|
||||
@@ -28,9 +28,8 @@ export const useTasksStore = defineStore("tasks", () => {
|
||||
for (const t of activeTagFilters.value) {
|
||||
searchParams.append("tag", t);
|
||||
}
|
||||
if (statusFilter.value) searchParams.set("status", statusFilter.value);
|
||||
if (priorityFilter.value)
|
||||
searchParams.set("priority", priorityFilter.value);
|
||||
for (const s of statusFilter.value) searchParams.append("status", s);
|
||||
for (const p of priorityFilter.value) searchParams.append("priority", p);
|
||||
searchParams.set("sort", sortField.value);
|
||||
searchParams.set("order", sortOrder.value);
|
||||
searchParams.set("limit", String(limit.value));
|
||||
@@ -72,6 +71,7 @@ export const useTasksStore = defineStore("tasks", () => {
|
||||
project_id?: number | null;
|
||||
milestone_id?: number | null;
|
||||
parent_id?: number | null;
|
||||
recurrence_rule?: Record<string, unknown> | null;
|
||||
}): Promise<Task> {
|
||||
try {
|
||||
return await apiPost<Task>("/api/tasks", data);
|
||||
@@ -84,7 +84,7 @@ export const useTasksStore = defineStore("tasks", () => {
|
||||
async function updateTask(
|
||||
id: number,
|
||||
data: Partial<
|
||||
Pick<Task, "title" | "body" | "tags" | "status" | "priority" | "due_date" | "project_id" | "milestone_id" | "parent_id">
|
||||
Pick<Task, "title" | "body" | "tags" | "status" | "priority" | "due_date" | "project_id" | "milestone_id" | "parent_id" | "recurrence_rule">
|
||||
>
|
||||
): Promise<Task> {
|
||||
try {
|
||||
@@ -129,14 +129,14 @@ export const useTasksStore = defineStore("tasks", () => {
|
||||
}
|
||||
}
|
||||
|
||||
function setStatusFilter(status: TaskStatus | "") {
|
||||
statusFilter.value = status;
|
||||
function setStatusFilter(statuses: TaskStatus[]) {
|
||||
statusFilter.value = statuses;
|
||||
offset.value = 0;
|
||||
refresh();
|
||||
}
|
||||
|
||||
function setPriorityFilter(priority: TaskPriority | "") {
|
||||
priorityFilter.value = priority;
|
||||
function setPriorityFilter(priorities: TaskPriority[]) {
|
||||
priorityFilter.value = priorities;
|
||||
offset.value = 0;
|
||||
refresh();
|
||||
}
|
||||
|
||||
@@ -28,6 +28,7 @@ export interface Message {
|
||||
context_note_id: number | null;
|
||||
context_note_title?: string | null;
|
||||
tool_calls?: ToolCallRecord[] | null;
|
||||
metadata?: Record<string, unknown> | null;
|
||||
created_at: string;
|
||||
timing?: GenerationTiming;
|
||||
thinking?: string;
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
export interface NewsItem {
|
||||
id: number
|
||||
title: string
|
||||
url: string
|
||||
snippet: string
|
||||
content: string
|
||||
published_at: string | null
|
||||
topics: string[]
|
||||
source: string
|
||||
reaction: 'up' | 'down' | null
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
export type TaskStatus = "todo" | "in_progress" | "done";
|
||||
export type TaskStatus = "todo" | "in_progress" | "done" | "cancelled";
|
||||
export type TaskPriority = "none" | "low" | "medium" | "high";
|
||||
export type NoteType = "note" | "person" | "place" | "list";
|
||||
|
||||
export interface Note {
|
||||
id: number;
|
||||
@@ -13,7 +14,13 @@ export interface Note {
|
||||
status: TaskStatus | null;
|
||||
priority: TaskPriority | null;
|
||||
due_date: string | null;
|
||||
started_at: string | null;
|
||||
completed_at: string | null;
|
||||
recurrence_rule: Record<string, unknown> | null;
|
||||
recurrence_next_spawn_at: string | null;
|
||||
is_task: boolean;
|
||||
note_type: NoteType;
|
||||
metadata: Record<string, string>;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
/** Shared date/time formatting helpers used across Calendar, Home, Knowledge, etc. */
|
||||
|
||||
function _isSameDay(a: Date, b: Date): boolean {
|
||||
return a.getFullYear() === b.getFullYear() &&
|
||||
a.getMonth() === b.getMonth() &&
|
||||
a.getDate() === b.getDate()
|
||||
}
|
||||
|
||||
/** "9:30 AM" */
|
||||
export function fmtTime(dt: string): string {
|
||||
return new Date(dt).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })
|
||||
}
|
||||
|
||||
/** "Mon, Jan 15" or "Mon, Jan 15, 9:30 AM" */
|
||||
export function fmtDateTime(dt: string, allDay: boolean): string {
|
||||
const d = new Date(dt)
|
||||
const datePart = d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })
|
||||
if (allDay) return datePart
|
||||
return `${datePart}, ${d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })}`
|
||||
}
|
||||
|
||||
/**
|
||||
* "Today 9:30 AM" / "Tomorrow 9:30 AM" / "Mon, Jan 15 9:30 AM"
|
||||
* For all-day events returns "Today" / "Tomorrow" / "Mon, Jan 15"
|
||||
*/
|
||||
export function fmtRelativeDateTime(dt: string, allDay: boolean): string {
|
||||
try {
|
||||
const d = new Date(dt)
|
||||
const now = new Date()
|
||||
const tomorrow = new Date(now)
|
||||
tomorrow.setDate(now.getDate() + 1)
|
||||
|
||||
const timeStr = allDay ? "" : ` ${d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })}`
|
||||
|
||||
if (_isSameDay(d, now)) return `Today${timeStr}`
|
||||
if (_isSameDay(d, tomorrow)) return `Tomorrow${timeStr}`
|
||||
return d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" }) + timeStr
|
||||
} catch {
|
||||
return dt
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Label-only: "Today" / "Tomorrow" / "Mon, Jan 15"
|
||||
*/
|
||||
export function fmtDayLabel(dt: string): string {
|
||||
try {
|
||||
const d = new Date(dt)
|
||||
const now = new Date()
|
||||
const tomorrow = new Date(now)
|
||||
tomorrow.setDate(now.getDate() + 1)
|
||||
if (_isSameDay(d, now)) return "Today"
|
||||
if (_isSameDay(d, tomorrow)) return "Tomorrow"
|
||||
return d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })
|
||||
} catch {
|
||||
return dt
|
||||
}
|
||||
}
|
||||
|
||||
/** "Jan 15" or "Jan 15, 9:30 AM" — compact, no weekday */
|
||||
export function fmtCompact(dt: string, allDay: boolean): string {
|
||||
const d = new Date(dt)
|
||||
if (allDay) return d.toLocaleDateString(undefined, { month: "short", day: "numeric" })
|
||||
return d.toLocaleString(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" })
|
||||
}
|
||||
@@ -38,7 +38,7 @@ const headingRenderer = {
|
||||
marked.use({ renderer: headingRenderer });
|
||||
|
||||
const PURIFY_OPTS_FULL = {
|
||||
ADD_ATTR: ["data-tag", "data-title", "src", "alt"],
|
||||
ADD_ATTR: ["data-tag", "data-title", "data-task-index"],
|
||||
FORCE_BODY: true,
|
||||
};
|
||||
|
||||
@@ -47,10 +47,22 @@ const PURIFY_OPTS_PREVIEW = {
|
||||
FORCE_BODY: true,
|
||||
};
|
||||
|
||||
export function renderMarkdown(text: string): string {
|
||||
export function renderMarkdown(text: string, { interactiveCheckboxes = false } = {}): string {
|
||||
const stripped = stripFirstLineTags(text);
|
||||
const decoded = decodeEntities(stripped);
|
||||
const html = marked(decoded) as string;
|
||||
let html = marked(decoded) as string;
|
||||
|
||||
if (interactiveCheckboxes) {
|
||||
// marked renders task-list checkboxes as <input ... disabled="" ...>.
|
||||
// Remove disabled and stamp a sequential data-task-index so the viewer
|
||||
// can identify which item was toggled regardless of attribute order.
|
||||
html = html.replace(/ disabled=""/g, "");
|
||||
let taskIdx = 0;
|
||||
html = html.replace(/<input ([^>]*type="checkbox"[^>]*)>/g, (_m, attrs) => {
|
||||
return `<input data-task-index="${taskIdx++}" ${attrs}>`;
|
||||
});
|
||||
}
|
||||
|
||||
const withTags = linkifyTags(html);
|
||||
const withLinks = linkifyWikilinks(withTags);
|
||||
const sanitized = DOMPurify.sanitize(withLinks, PURIFY_OPTS_FULL);
|
||||
|
||||
+228
-258
@@ -1,46 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
|
||||
import { useBackgroundRefresh } from '@/composables/useBackgroundRefresh'
|
||||
import { useChatStore } from '@/stores/chat'
|
||||
import ChatMessage from '@/components/ChatMessage.vue'
|
||||
import ChatPanel from '@/components/ChatPanel.vue'
|
||||
import WeatherCard from '@/components/WeatherCard.vue'
|
||||
import BriefingSetupWizard from '@/components/BriefingSetupWizard.vue'
|
||||
import {
|
||||
apiGet,
|
||||
apiPost,
|
||||
getBriefingConfig,
|
||||
getBriefingConversations,
|
||||
getBriefingToday,
|
||||
getBriefingConvMessages,
|
||||
triggerBriefingSlot,
|
||||
postRssReaction,
|
||||
deleteRssReaction,
|
||||
getNewsItems,
|
||||
type BriefingConversation,
|
||||
type BriefingMessage,
|
||||
} from '@/api/client'
|
||||
import type { Message } from '@/types/chat'
|
||||
import type { NewsItem } from '@/types/news'
|
||||
|
||||
interface RssItemMeta {
|
||||
id: number
|
||||
title: string
|
||||
url: string
|
||||
source: string
|
||||
snippet: string
|
||||
published_at: string | null
|
||||
}
|
||||
|
||||
interface MessageMetadata {
|
||||
weather?: {
|
||||
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 }[]
|
||||
} | null
|
||||
rss_item_ids?: number[]
|
||||
rss_items?: RssItemMeta[]
|
||||
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
|
||||
wind_unit?: string
|
||||
forecast: { day: string; condition: string; high: number; low: number; precip_probability: number | null; precip_mm: number | null; windspeed_max: number }[]
|
||||
}
|
||||
|
||||
const chatStore = useChatStore()
|
||||
@@ -67,19 +56,44 @@ const todayConvId = ref<number | null>(null)
|
||||
|
||||
const isToday = computed(() => selectedConvId.value === todayConvId.value)
|
||||
|
||||
// Messages for selected conversation
|
||||
const messages = ref<BriefingMessage[]>([])
|
||||
const loadingMessages = ref(false)
|
||||
// Weather panel (left column)
|
||||
const weatherData = ref<WeatherData[]>([])
|
||||
const tempUnit = ref<string>('C')
|
||||
|
||||
async function loadWeather() {
|
||||
try {
|
||||
const data = await apiGet<{ locations: WeatherData[]; temp_unit: string }>('/api/briefing/weather')
|
||||
weatherData.value = data.locations ?? []
|
||||
tempUnit.value = data.temp_unit ?? 'C'
|
||||
} catch { /* silent */ }
|
||||
}
|
||||
|
||||
// News panel (right column)
|
||||
const newsItems = ref<NewsItem[]>([])
|
||||
|
||||
async function loadNews() {
|
||||
try {
|
||||
const data = await getNewsItems({ days: 2, limit: 40 })
|
||||
newsItems.value = data.items
|
||||
// Seed reactions from API response
|
||||
for (const item of data.items) {
|
||||
if (reactions.value[item.id] === undefined) {
|
||||
reactions.value[item.id] = item.reaction
|
||||
}
|
||||
}
|
||||
} catch { /* silent */ }
|
||||
}
|
||||
|
||||
async function loadAll() {
|
||||
const [convList, today] = await Promise.all([
|
||||
getBriefingConversations(),
|
||||
getBriefingToday().catch(() => null),
|
||||
loadWeather(),
|
||||
loadNews(),
|
||||
])
|
||||
conversations.value = convList
|
||||
if (today) {
|
||||
todayConvId.value = today.id
|
||||
// Ensure today is in the list
|
||||
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() },
|
||||
@@ -87,60 +101,32 @@ async function loadAll() {
|
||||
]
|
||||
}
|
||||
selectedConvId.value = today.id
|
||||
messages.value = today.messages
|
||||
// Load into chatStore so we can stream
|
||||
await chatStore.fetchConversation(today.id)
|
||||
}
|
||||
}
|
||||
|
||||
watch(selectedConvId, async (id) => {
|
||||
if (!id) return
|
||||
if (id === todayConvId.value) {
|
||||
try {
|
||||
await chatStore.fetchConversation(id)
|
||||
messages.value = (chatStore.currentConversation?.messages ?? []) as unknown as BriefingMessage[]
|
||||
} catch {
|
||||
// Historical conversation unavailable — do nothing
|
||||
}
|
||||
})
|
||||
|
||||
async function discussArticle(item: NewsItem) {
|
||||
if (!todayConvId.value || chatStore.streaming) return
|
||||
if (!isToday.value) selectedConvId.value = todayConvId.value
|
||||
await nextTick(() => {
|
||||
document.querySelector('.briefing-center')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
|
||||
})
|
||||
try {
|
||||
await apiPost<{ assistant_message_id: number }>(`/api/briefing/articles/${item.id}/discuss`, { conv_id: todayConvId.value })
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
loadingMessages.value = true
|
||||
try {
|
||||
messages.value = await getBriefingConvMessages(id)
|
||||
} finally {
|
||||
loadingMessages.value = false
|
||||
}
|
||||
})
|
||||
|
||||
// Refresh messages after streaming ends
|
||||
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
|
||||
}
|
||||
})
|
||||
|
||||
// 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
|
||||
// Ensure today's conv is loaded in chatStore
|
||||
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()
|
||||
}
|
||||
await chatStore.fetchConversation(todayConvId.value)
|
||||
await chatStore.reconnectIfGenerating(todayConvId.value)
|
||||
}
|
||||
|
||||
// RSS reactions: map of rss_item_id -> 'up' | 'down' | null
|
||||
@@ -160,10 +146,6 @@ async function handleReaction(itemId: number, reaction: 'up' | 'down') {
|
||||
}
|
||||
}
|
||||
|
||||
function msgMetadata(msg: BriefingMessage): MessageMetadata | null {
|
||||
return (msg.metadata as MessageMetadata | null | undefined) ?? null
|
||||
}
|
||||
|
||||
function formatRelativeDate(iso: string | null): string {
|
||||
if (!iso) return ''
|
||||
const d = new Date(iso)
|
||||
@@ -180,10 +162,10 @@ async function triggerNow() {
|
||||
triggering.value = true
|
||||
try {
|
||||
await triggerBriefingSlot('compilation')
|
||||
// Reload
|
||||
await loadAll()
|
||||
// Guard: user may have navigated away during the long compilation
|
||||
if (_mounted) await loadAll()
|
||||
} finally {
|
||||
triggering.value = false
|
||||
if (_mounted) triggering.value = false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -197,30 +179,15 @@ function convLabel(c: BriefingConversation): string {
|
||||
return c.title || 'Briefing'
|
||||
}
|
||||
|
||||
// Convert BriefingMessage to Message for ChatMessage component
|
||||
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,
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Background refresh (no-flicker) ─────────────────────────────────────────
|
||||
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
|
||||
if (_mounted && isToday.value && chatStore.currentConversation?.id === todayConvId.value) {
|
||||
await chatStore.fetchConversation(today.id)
|
||||
}
|
||||
await loadNews()
|
||||
} catch { /* silent — don't disturb the UI on network hiccup */ }
|
||||
}
|
||||
|
||||
@@ -230,6 +197,9 @@ useBackgroundRefresh(
|
||||
() => !chatStore.streaming && isToday.value && !!todayConvId.value,
|
||||
)
|
||||
|
||||
let _mounted = true
|
||||
onUnmounted(() => { _mounted = false })
|
||||
|
||||
onMounted(async () => {
|
||||
await checkSetup()
|
||||
if (!showWizard.value) await loadAll()
|
||||
@@ -241,16 +211,15 @@ onMounted(async () => {
|
||||
<!-- Setup wizard overlay -->
|
||||
<BriefingSetupWizard v-if="wizardChecked && showWizard" @done="onWizardDone" />
|
||||
|
||||
<!-- Main view (shown after wizard check and only if not showing wizard) -->
|
||||
<!-- Main view -->
|
||||
<div class="briefing-shell" v-if="wizardChecked && !showWizard">
|
||||
<!-- Header -->
|
||||
<!-- Header spans all 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">
|
||||
<!-- Conversation history dropdown -->
|
||||
<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>
|
||||
@@ -263,102 +232,77 @@ onMounted(async () => {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Messages -->
|
||||
<div class="briefing-messages-wrap">
|
||||
<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">
|
||||
<!-- Weather card above the first assistant message with weather metadata -->
|
||||
<WeatherCard
|
||||
v-if="msg.role === 'assistant' && msgMetadata(msg)?.weather !== undefined"
|
||||
:weather="msgMetadata(msg)?.weather ?? null"
|
||||
/>
|
||||
<ChatMessage
|
||||
:message="toMsg(msg)"
|
||||
:is-streaming="false"
|
||||
/>
|
||||
<!-- News cards below assistant messages with rss_items -->
|
||||
<div
|
||||
v-if="msg.role === 'assistant' && (msgMetadata(msg)?.rss_items?.length ?? 0) > 0"
|
||||
class="news-cards"
|
||||
>
|
||||
<div
|
||||
v-for="item in msgMetadata(msg)!.rss_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-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>
|
||||
</template>
|
||||
<!-- Live streaming bubble for today -->
|
||||
<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>
|
||||
<!-- Left column: Weather -->
|
||||
<div class="briefing-left">
|
||||
<div class="panel-label">Weather</div>
|
||||
<template v-if="weatherData.length">
|
||||
<WeatherCard
|
||||
v-for="loc in weatherData"
|
||||
:key="(loc as WeatherData).location"
|
||||
:weather="loc"
|
||||
:temp-unit="tempUnit"
|
||||
/>
|
||||
</template>
|
||||
<div v-else class="panel-empty">No weather configured</div>
|
||||
</div>
|
||||
|
||||
<!-- Input bar (today only) -->
|
||||
<div v-if="isToday" class="briefing-input-bar">
|
||||
<textarea
|
||||
v-model="input"
|
||||
class="briefing-input"
|
||||
<!-- Center column: Chat -->
|
||||
<div class="briefing-center">
|
||||
<ChatPanel
|
||||
variant="full"
|
||||
briefingMode
|
||||
:readOnly="!isToday"
|
||||
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"
|
||||
class="briefing-chat-panel"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Right column: News -->
|
||||
<div class="briefing-right">
|
||||
<div class="panel-label-row">
|
||||
<div class="panel-label">Today's News</div>
|
||||
<span v-if="newsItems.length" class="news-count">{{ newsItems.length }} items</span>
|
||||
</div>
|
||||
<div v-if="!newsItems.length" class="panel-empty">No articles in the last 2 days</div>
|
||||
<div
|
||||
v-for="item in newsItems"
|
||||
:key="item.id"
|
||||
class="news-card"
|
||||
>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<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>
|
||||
<button
|
||||
v-if="isToday && todayConvId"
|
||||
class="reaction-btn discuss-btn"
|
||||
@click="discussArticle(item)"
|
||||
title="Discuss in briefing chat"
|
||||
>💬</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -373,21 +317,20 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.briefing-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.briefing-header {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.25rem 0 1rem;
|
||||
padding: 1.25rem 1rem 1rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
gap: 1rem;
|
||||
@@ -448,81 +391,76 @@ onMounted(async () => {
|
||||
}
|
||||
.btn-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.briefing-messages-wrap {
|
||||
flex: 1;
|
||||
/* ─── Left column (Weather) ──────────────────────────────────────────────── */
|
||||
|
||||
.briefing-left {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
border-right: 1px solid var(--color-border);
|
||||
overflow-y: auto;
|
||||
padding: 1rem 0;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.briefing-loading,
|
||||
.briefing-empty {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9rem;
|
||||
.briefing-left :deep(.weather-card) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.briefing-empty-hint {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
margin-top: 0.5rem;
|
||||
/* ─── Center column (Chat) ───────────────────────────────────────────────── */
|
||||
|
||||
.briefing-center {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.briefing-messages {
|
||||
.briefing-chat-panel {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ─── Right column (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;
|
||||
}
|
||||
|
||||
.briefing-input-bar {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-end;
|
||||
padding: 0.75rem 0 1rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
.panel-label {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--color-primary);
|
||||
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;
|
||||
.panel-label-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 0.15s;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-send:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
.btn-send:hover:not(:disabled) { opacity: 0.9; }
|
||||
|
||||
.news-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
.news-count {
|
||||
font-size: 0.72rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.panel-empty {
|
||||
font-size: 0.82rem;
|
||||
color: var(--color-text-muted);
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
@@ -533,6 +471,7 @@ onMounted(async () => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.news-card-meta {
|
||||
@@ -604,4 +543,35 @@ a.news-title:hover { text-decoration: underline; color: var(--color-primary); }
|
||||
border-color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
|
||||
}
|
||||
|
||||
/* ─── Responsive ─────────────────────────────────────────────────────────── */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.briefing-shell {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto 1fr 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: 260px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref, computed, onMounted, onUnmounted } from "vue";
|
||||
import FullCalendar from "@fullcalendar/vue3";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
@@ -9,12 +9,13 @@ import type { DateClickArg, EventResizeDoneArg } from "@fullcalendar/interaction
|
||||
import { listEvents, updateEvent, type EventEntry } from "@/api/client";
|
||||
import EventSlideOver from "@/components/EventSlideOver.vue";
|
||||
import { useToastStore } from "@/stores/toast";
|
||||
import { fmtTime, fmtDateTime, fmtDayLabel } from "@/utils/dateFormat";
|
||||
|
||||
const toast = useToastStore();
|
||||
const calendarRef = ref<InstanceType<typeof FullCalendar> | null>(null);
|
||||
|
||||
// Slide-over state
|
||||
const slideOverEvent = ref<EventEntry | null>(null); // null = create mode
|
||||
const slideOverEvent = ref<EventEntry | null>(null);
|
||||
const slideOverOpen = ref(false);
|
||||
const slideOverDate = ref<string>("");
|
||||
|
||||
@@ -34,15 +35,17 @@ function closeSlideOver() {
|
||||
slideOverOpen.value = false;
|
||||
}
|
||||
|
||||
// Event entry cache keyed by id for quick lookups when clicking FC events
|
||||
// Event entry cache keyed by id
|
||||
const eventCache = new Map<number, EventEntry>();
|
||||
|
||||
function toFcEvent(e: EventEntry) {
|
||||
// For all-day events pass date-only strings so FullCalendar never shifts
|
||||
// the date through timezone conversion (UTC midnight → previous day in UTC-X).
|
||||
return {
|
||||
id: String(e.id),
|
||||
title: e.title,
|
||||
start: e.start_dt,
|
||||
end: e.end_dt ?? undefined,
|
||||
start: e.all_day ? e.start_dt.slice(0, 10) : e.start_dt,
|
||||
end: e.all_day ? (e.end_dt?.slice(0, 10) ?? undefined) : (e.end_dt ?? undefined),
|
||||
allDay: e.all_day,
|
||||
backgroundColor: e.color || undefined,
|
||||
borderColor: e.color || undefined,
|
||||
@@ -50,6 +53,128 @@ function toFcEvent(e: EventEntry) {
|
||||
};
|
||||
}
|
||||
|
||||
// ── Upcoming events list ───────────────────────────────────────────────────
|
||||
const upcomingEvents = ref<EventEntry[]>([]);
|
||||
|
||||
async function loadUpcoming() {
|
||||
const now = new Date();
|
||||
const end = new Date(now.getTime() + 28 * 86_400_000); // 4 weeks
|
||||
try {
|
||||
const entries = await listEvents(now.toISOString(), end.toISOString());
|
||||
upcomingEvents.value = entries.sort(
|
||||
(a, b) => new Date(a.start_dt).getTime() - new Date(b.start_dt).getTime()
|
||||
);
|
||||
} catch { /* silent */ }
|
||||
}
|
||||
|
||||
onMounted(loadUpcoming);
|
||||
|
||||
// ── Month/year picker ──────────────────────────────────────────────────────
|
||||
const currentViewYear = ref(new Date().getFullYear());
|
||||
const currentViewMonth = ref(new Date().getMonth());
|
||||
const pickerOpen = ref(false);
|
||||
const pickerYear = ref(new Date().getFullYear());
|
||||
const pickerStyle = ref<Record<string, string>>({});
|
||||
const pickerEl = ref<HTMLElement | null>(null);
|
||||
|
||||
const MONTH_NAMES = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"] as const;
|
||||
|
||||
function handleDatesSet(arg: { view: { currentStart: Date } }) {
|
||||
const d = arg.view.currentStart;
|
||||
currentViewYear.value = d.getFullYear();
|
||||
currentViewMonth.value = d.getMonth();
|
||||
}
|
||||
|
||||
function jumpTo(year: number, month: number) {
|
||||
calendarRef.value?.getApi().gotoDate(new Date(year, month, 1));
|
||||
pickerOpen.value = false;
|
||||
}
|
||||
|
||||
// ── Event popover ──────────────────────────────────────────────────────────
|
||||
const popover = ref<EventEntry | null>(null);
|
||||
const popoverStyle = ref<Record<string, string>>({});
|
||||
const popoverEl = ref<HTMLElement | null>(null);
|
||||
|
||||
function showPopover(entry: EventEntry, clickEvent: MouseEvent) {
|
||||
popover.value = entry;
|
||||
nextTickPositionPopover(clickEvent);
|
||||
}
|
||||
|
||||
function nextTickPositionPopover(clickEvent: MouseEvent) {
|
||||
// Position after DOM update
|
||||
requestAnimationFrame(() => {
|
||||
const vw = window.innerWidth;
|
||||
const vh = window.innerHeight;
|
||||
const pw = 280;
|
||||
const ph = 220; // approximate
|
||||
let left = clickEvent.clientX + 8;
|
||||
let top = clickEvent.clientY + 8;
|
||||
if (left + pw > vw - 16) left = clickEvent.clientX - pw - 8;
|
||||
if (top + ph > vh - 16) top = clickEvent.clientY - ph - 8;
|
||||
popoverStyle.value = {
|
||||
position: "fixed",
|
||||
left: `${Math.max(8, left)}px`,
|
||||
top: `${Math.max(8, top)}px`,
|
||||
zIndex: "9999",
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function closePopover() {
|
||||
popover.value = null;
|
||||
}
|
||||
|
||||
function onPopoverEdit() {
|
||||
if (popover.value) {
|
||||
openEdit(popover.value);
|
||||
closePopover();
|
||||
}
|
||||
}
|
||||
|
||||
// Close popover / open picker on outside or title click
|
||||
function onDocClick(e: MouseEvent) {
|
||||
const target = e.target as HTMLElement;
|
||||
// Title click → toggle month/year picker
|
||||
const titleEl = target.closest(".fc-toolbar-title");
|
||||
if (titleEl) {
|
||||
if (!pickerOpen.value) {
|
||||
pickerYear.value = currentViewYear.value;
|
||||
const rect = titleEl.getBoundingClientRect();
|
||||
const left = Math.max(8, Math.min(rect.left + rect.width / 2 - 140, window.innerWidth - 296));
|
||||
pickerStyle.value = {
|
||||
position: "fixed",
|
||||
top: `${rect.bottom + 6}px`,
|
||||
left: `${left}px`,
|
||||
zIndex: "9999",
|
||||
};
|
||||
}
|
||||
pickerOpen.value = !pickerOpen.value;
|
||||
return;
|
||||
}
|
||||
// Close picker on outside click
|
||||
if (pickerOpen.value && pickerEl.value && !pickerEl.value.contains(target)) {
|
||||
pickerOpen.value = false;
|
||||
}
|
||||
// Close event popover on outside click
|
||||
if (popover.value && popoverEl.value && !popoverEl.value.contains(target)) {
|
||||
closePopover();
|
||||
}
|
||||
}
|
||||
|
||||
function onCalendarChanged() {
|
||||
calendarRef.value?.getApi().refetchEvents();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener("mousedown", onDocClick);
|
||||
document.addEventListener("fable:calendar-changed", onCalendarChanged);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("mousedown", onDocClick);
|
||||
document.removeEventListener("fable:calendar-changed", onCalendarChanged);
|
||||
});
|
||||
|
||||
// ── Calendar callbacks ─────────────────────────────────────────────────────
|
||||
async function loadEvents(
|
||||
fetchInfo: { startStr: string; endStr: string },
|
||||
successCallback: (events: object[]) => void,
|
||||
@@ -60,19 +185,21 @@ async function loadEvents(
|
||||
eventCache.clear();
|
||||
for (const e of entries) eventCache.set(e.id, e);
|
||||
successCallback(entries.map(toFcEvent));
|
||||
loadUpcoming();
|
||||
} catch (err) {
|
||||
failureCallback(err instanceof Error ? err : new Error(String(err)));
|
||||
}
|
||||
}
|
||||
|
||||
function handleDateClick(arg: DateClickArg) {
|
||||
closePopover();
|
||||
openCreate(arg.dateStr);
|
||||
}
|
||||
|
||||
function handleEventClick(arg: EventClickArg) {
|
||||
const id = arg.event.extendedProps.entryId as number;
|
||||
const entry = eventCache.get(id);
|
||||
if (entry) openEdit(entry);
|
||||
if (entry) showPopover(entry, arg.jsEvent as MouseEvent);
|
||||
}
|
||||
|
||||
async function handleEventDrop(arg: EventDropArg) {
|
||||
@@ -82,6 +209,7 @@ async function handleEventDrop(arg: EventDropArg) {
|
||||
try {
|
||||
const updated = await updateEvent(id, { start_dt, end_dt, all_day: arg.event.allDay });
|
||||
eventCache.set(id, updated);
|
||||
loadUpcoming();
|
||||
} catch {
|
||||
arg.revert();
|
||||
toast.show("Failed to move event", "error");
|
||||
@@ -95,6 +223,7 @@ async function handleEventResize(arg: EventResizeDoneArg) {
|
||||
try {
|
||||
const updated = await updateEvent(id, { start_dt, end_dt });
|
||||
eventCache.set(id, updated);
|
||||
loadUpcoming();
|
||||
} catch {
|
||||
arg.revert();
|
||||
toast.show("Failed to resize event", "error");
|
||||
@@ -105,11 +234,11 @@ function onCreated(entry: EventEntry) {
|
||||
eventCache.set(entry.id, entry);
|
||||
calendarRef.value?.getApi().addEvent(toFcEvent(entry));
|
||||
closeSlideOver();
|
||||
loadUpcoming();
|
||||
}
|
||||
|
||||
function onUpdated(entry: EventEntry) {
|
||||
eventCache.set(entry.id, entry);
|
||||
// Replace the event in FullCalendar
|
||||
const api = calendarRef.value?.getApi();
|
||||
if (api) {
|
||||
const existing = api.getEventById(String(entry.id));
|
||||
@@ -119,15 +248,15 @@ function onUpdated(entry: EventEntry) {
|
||||
}
|
||||
}
|
||||
closeSlideOver();
|
||||
loadUpcoming();
|
||||
}
|
||||
|
||||
function onDeleted(id: number) {
|
||||
eventCache.delete(id);
|
||||
const api = calendarRef.value?.getApi();
|
||||
if (api) {
|
||||
api.getEventById(String(id))?.remove();
|
||||
}
|
||||
if (api) api.getEventById(String(id))?.remove();
|
||||
closeSlideOver();
|
||||
upcomingEvents.value = upcomingEvents.value.filter((e) => e.id !== id);
|
||||
}
|
||||
|
||||
const calendarOptions: CalendarOptions = {
|
||||
@@ -142,12 +271,28 @@ const calendarOptions: CalendarOptions = {
|
||||
right: "dayGridMonth,timeGridWeek,timeGridDay",
|
||||
},
|
||||
events: loadEvents,
|
||||
datesSet: handleDatesSet,
|
||||
dateClick: handleDateClick,
|
||||
eventClick: handleEventClick,
|
||||
eventDrop: handleEventDrop,
|
||||
eventResize: handleEventResize,
|
||||
height: "auto",
|
||||
};
|
||||
|
||||
// Group upcoming events by day label
|
||||
const upcomingGrouped = computed(() => {
|
||||
const groups: { label: string; date: string; events: EventEntry[] }[] = [];
|
||||
for (const e of upcomingEvents.value) {
|
||||
const label = fmtDayLabel(e.start_dt);
|
||||
const existing = groups.find((g) => g.label === label);
|
||||
if (existing) {
|
||||
existing.events.push(e);
|
||||
} else {
|
||||
groups.push({ label, date: e.start_dt, events: [e] });
|
||||
}
|
||||
}
|
||||
return groups;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -163,6 +308,99 @@ const calendarOptions: CalendarOptions = {
|
||||
<FullCalendar ref="calendarRef" :options="calendarOptions" />
|
||||
</div>
|
||||
|
||||
<!-- ── Upcoming events strip ───────────────────────────────────────── -->
|
||||
<div v-if="upcomingEvents.length" class="upcoming-section">
|
||||
<h2 class="upcoming-title">Upcoming</h2>
|
||||
<div class="upcoming-groups">
|
||||
<div v-for="group in upcomingGrouped" :key="group.label" class="upcoming-group">
|
||||
<div class="upcoming-day-label">{{ group.label }}</div>
|
||||
<div class="upcoming-cards">
|
||||
<div
|
||||
v-for="ev in group.events"
|
||||
:key="ev.id"
|
||||
class="upcoming-card"
|
||||
:style="ev.color ? { '--ev-color': ev.color } : {}"
|
||||
@click="openEdit(ev)"
|
||||
>
|
||||
<div class="upcoming-card-accent"></div>
|
||||
<div class="upcoming-card-body">
|
||||
<div class="upcoming-card-title">{{ ev.title }}</div>
|
||||
<div class="upcoming-card-time">
|
||||
<template v-if="ev.all_day">All day</template>
|
||||
<template v-else>
|
||||
{{ fmtTime(ev.start_dt) }}
|
||||
<span v-if="ev.end_dt"> – {{ fmtTime(ev.end_dt) }}</span>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="ev.location" class="upcoming-card-meta">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0">
|
||||
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
|
||||
</svg>
|
||||
{{ ev.location }}
|
||||
</div>
|
||||
<div v-if="ev.description" class="upcoming-card-desc">{{ ev.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Event popover ───────────────────────────────────────────────── -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="popover"
|
||||
ref="popoverEl"
|
||||
class="event-popover"
|
||||
:style="popoverStyle"
|
||||
>
|
||||
<div class="popover-accent" :style="popover.color ? { background: popover.color } : {}"></div>
|
||||
<div class="popover-content">
|
||||
<div class="popover-title">{{ popover.title }}</div>
|
||||
<div class="popover-time">
|
||||
<template v-if="popover.all_day">
|
||||
{{ fmtDateTime(popover.start_dt, true) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ fmtDateTime(popover.start_dt, false) }}
|
||||
<span v-if="popover.end_dt"> – {{ fmtTime(popover.end_dt) }}</span>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="popover.location" class="popover-meta">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0;margin-top:1px">
|
||||
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
|
||||
</svg>
|
||||
{{ popover.location }}
|
||||
</div>
|
||||
<div v-if="popover.description" class="popover-desc">{{ popover.description }}</div>
|
||||
<div class="popover-actions">
|
||||
<button class="popover-btn popover-btn--edit" @click="onPopoverEdit">Edit</button>
|
||||
<button class="popover-btn popover-btn--close" @click="closePopover">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
<!-- ── Month/year picker ──────────────────────────────────────────── -->
|
||||
<Teleport to="body">
|
||||
<div v-if="pickerOpen" ref="pickerEl" class="month-picker" :style="pickerStyle">
|
||||
<div class="picker-year-row">
|
||||
<button class="picker-year-btn" @click="pickerYear--" aria-label="Previous year">‹</button>
|
||||
<span class="picker-year-label">{{ pickerYear }}</span>
|
||||
<button class="picker-year-btn" @click="pickerYear++" aria-label="Next year">›</button>
|
||||
</div>
|
||||
<div class="picker-months">
|
||||
<button
|
||||
v-for="(name, i) in MONTH_NAMES"
|
||||
:key="i"
|
||||
class="picker-month"
|
||||
:class="{ active: pickerYear === currentViewYear && i === currentViewMonth }"
|
||||
@click="jumpTo(pickerYear, i)"
|
||||
>{{ name }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
<EventSlideOver
|
||||
v-if="slideOverOpen"
|
||||
:event="slideOverEvent"
|
||||
@@ -177,7 +415,7 @@ const calendarOptions: CalendarOptions = {
|
||||
|
||||
<style scoped>
|
||||
.calendar-view {
|
||||
max-width: 1200px;
|
||||
max-width: var(--page-max-width);
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.5rem 3rem;
|
||||
}
|
||||
@@ -210,7 +448,7 @@ const calendarOptions: CalendarOptions = {
|
||||
.btn-new-event:hover { opacity: 0.88; }
|
||||
|
||||
.fc-wrapper {
|
||||
background: var(--color-surface, #1a1b1e);
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border, #2a2b30);
|
||||
border-radius: var(--radius-lg, 18px);
|
||||
padding: 1rem;
|
||||
@@ -225,9 +463,17 @@ const calendarOptions: CalendarOptions = {
|
||||
:deep(.fc-toolbar-title) {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
padding: 2px 8px;
|
||||
transition: background 0.15s;
|
||||
user-select: none;
|
||||
}
|
||||
:deep(.fc-toolbar-title:hover) {
|
||||
background: rgba(255,255,255,0.07);
|
||||
}
|
||||
:deep(.fc-button) {
|
||||
background: var(--color-input-bg, #111113);
|
||||
background: var(--color-input-bg, var(--color-bg));
|
||||
border: 1px solid var(--color-border, #2a2b30);
|
||||
color: var(--color-text-muted, #888);
|
||||
font-size: 0.82rem;
|
||||
@@ -267,4 +513,249 @@ const calendarOptions: CalendarOptions = {
|
||||
:deep(.fc-scrollgrid th) { border-color: var(--color-border, #2a2b30); }
|
||||
:deep(.fc-daygrid-day) { cursor: pointer; }
|
||||
:deep(.fc-daygrid-day:hover) { background: rgba(255,255,255,0.03); }
|
||||
|
||||
/* ── Month/year picker ──────────────────────────────────────────────────── */
|
||||
.month-picker {
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border, #2a2b30);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
|
||||
width: 280px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.picker-year-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.picker-year-label {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text, #e8e9f0);
|
||||
}
|
||||
|
||||
.picker-year-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--color-border, #2a2b30);
|
||||
border-radius: 6px;
|
||||
color: var(--color-text-muted, #888);
|
||||
cursor: pointer;
|
||||
padding: 2px 10px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.picker-year-btn:hover {
|
||||
color: var(--color-text, #e8e9f0);
|
||||
border-color: rgba(255,255,255,0.25);
|
||||
}
|
||||
|
||||
.picker-months {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.picker-month {
|
||||
padding: 7px 4px;
|
||||
border: none;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: var(--color-text, #e8e9f0);
|
||||
cursor: pointer;
|
||||
font-size: 0.84rem;
|
||||
text-align: center;
|
||||
transition: background 0.12s, color 0.12s;
|
||||
}
|
||||
.picker-month:hover {
|
||||
background: rgba(255,255,255,0.08);
|
||||
}
|
||||
.picker-month.active {
|
||||
background: rgba(99,102,241,0.22);
|
||||
color: var(--color-primary, #818cf8);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ── Upcoming strip ─────────────────────────────────────────────────────── */
|
||||
.upcoming-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.upcoming-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-muted, #888);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
font-size: 0.78rem;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.upcoming-groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.upcoming-day-label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-muted, #888);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.upcoming-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.upcoming-card {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border, #2a2b30);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
.upcoming-card:hover {
|
||||
border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.upcoming-card-accent {
|
||||
width: 4px;
|
||||
flex-shrink: 0;
|
||||
background: var(--ev-color, #6366f1);
|
||||
}
|
||||
|
||||
.upcoming-card-body {
|
||||
padding: 0.6rem 0.85rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.upcoming-card-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text, #e8e9f0);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.upcoming-card-time {
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-text-muted, #888);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
.upcoming-card-meta {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-text-muted, #888);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.upcoming-card-desc {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary, #aaa);
|
||||
margin-top: 0.3rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Event popover ──────────────────────────────────────────────────────── */
|
||||
.event-popover {
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border, #2a2b30);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.45);
|
||||
width: 280px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.popover-accent {
|
||||
height: 4px;
|
||||
background: var(--color-primary, #6366f1);
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
padding: 0.85rem 1rem 0.75rem;
|
||||
}
|
||||
|
||||
.popover-title {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text, #e8e9f0);
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.popover-time {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted, #888);
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.popover-meta {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted, #888);
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.popover-desc {
|
||||
font-size: 0.82rem;
|
||||
color: var(--color-text-secondary, #aaa);
|
||||
line-height: 1.45;
|
||||
margin-bottom: 0.6rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popover-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid var(--color-border, #2a2b30);
|
||||
}
|
||||
|
||||
.popover-btn {
|
||||
flex: 1;
|
||||
padding: 0.35rem 0;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.popover-btn:hover { opacity: 0.85; }
|
||||
.popover-btn--edit {
|
||||
background: var(--color-primary, #6366f1);
|
||||
color: #fff;
|
||||
}
|
||||
.popover-btn--close {
|
||||
background: var(--color-input-bg, var(--color-bg));
|
||||
color: var(--color-text-muted, #888);
|
||||
border: 1px solid var(--color-border, #2a2b30);
|
||||
}
|
||||
</style>
|
||||
|
||||
+120
-1233
File diff suppressed because it is too large
Load Diff
+22
-195
@@ -1,18 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from "vue";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { apiGet, listEvents } from "@/api/client";
|
||||
import { useBackgroundRefresh } from "@/composables/useBackgroundRefresh";
|
||||
import { milestoneColor } from "@/utils/palette";
|
||||
import { fmtRelativeDateTime } from "@/utils/dateFormat";
|
||||
import type { Note } from "@/types/note";
|
||||
import type { Task, TaskListResponse, TaskStatus } from "@/types/task";
|
||||
import type { ToolCallRecord, Message } from "@/types/chat";
|
||||
import type { EventEntry } from "@/api/client";
|
||||
import NoteCard from "@/components/NoteCard.vue";
|
||||
import TaskCard from "@/components/TaskCard.vue";
|
||||
import StatusBadge from "@/components/StatusBadge.vue";
|
||||
import PriorityBadge from "@/components/PriorityBadge.vue";
|
||||
import ToolCallCard from "@/components/ToolCallCard.vue";
|
||||
import DashboardChatInput from "@/components/DashboardChatInput.vue";
|
||||
import ChatPanel from "@/components/ChatPanel.vue";
|
||||
import EventSlideOver from "@/components/EventSlideOver.vue";
|
||||
import { useTasksStore } from "@/stores/tasks";
|
||||
import { useChatStore } from "@/stores/chat";
|
||||
@@ -78,9 +77,11 @@ function _dateRange() {
|
||||
const today = new Date()
|
||||
const nextWeek = new Date(today)
|
||||
nextWeek.setDate(today.getDate() + 7)
|
||||
// Use full ISO strings so the server sees the correct UTC equivalent of
|
||||
// local midnight / end-of-day rather than a naive UTC-midnight guess.
|
||||
return {
|
||||
todayStr: today.toISOString().slice(0, 10) + 'T00:00:00',
|
||||
nextWeekStr: nextWeek.toISOString().slice(0, 10) + 'T23:59:59',
|
||||
todayStr: today.toISOString(),
|
||||
nextWeekStr: nextWeek.toISOString(),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -109,11 +110,7 @@ function _backgroundRefresh() {
|
||||
|
||||
onMounted(async () => {
|
||||
// Phase 1: projects list + cross-project recent items + orphaned items + events — all parallel
|
||||
const today = new Date();
|
||||
const todayStr = today.toISOString().slice(0, 10) + "T00:00:00";
|
||||
const nextWeek = new Date(today);
|
||||
nextWeek.setDate(today.getDate() + 7);
|
||||
const nextWeekStr = nextWeek.toISOString().slice(0, 10) + "T23:59:59";
|
||||
const { todayStr, nextWeekStr } = _dateRange();
|
||||
|
||||
const [projectsRes, recentRes, orphanTasksRes, orphanNotesRes, eventsRes] =
|
||||
await Promise.allSettled([
|
||||
@@ -156,7 +153,7 @@ onMounted(async () => {
|
||||
loading.value = false;
|
||||
|
||||
// Focus chat input after data loads
|
||||
chatInputRef.value?.focus();
|
||||
chatPanelRef.value?.focus();
|
||||
loadProjects();
|
||||
|
||||
});
|
||||
@@ -215,10 +212,10 @@ function onStatusToggle(id: number, status: TaskStatus) {
|
||||
|
||||
// ─── Chat widget ──────────────────────────────────────────────────────────────
|
||||
|
||||
const chatInputRef = ref<{ focus: () => void } | null>(null);
|
||||
const chatPanelRef = ref<InstanceType<typeof ChatPanel> | null>(null);
|
||||
|
||||
function onFocusChatShortcut() {
|
||||
chatInputRef.value?.focus();
|
||||
chatPanelRef.value?.focus();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@@ -234,16 +231,6 @@ chatStore.fetchStatus().then(() => {
|
||||
if (chatStore.defaultModel) chatStore.warmModel(chatStore.defaultModel);
|
||||
});
|
||||
|
||||
const dashboardConvId = ref<number | null>(null);
|
||||
const dashboardDone = ref(false);
|
||||
const dashboardQuery = ref("");
|
||||
const dashboardFinalContent = ref("");
|
||||
const dashboardFinalToolCalls = ref<ToolCallRecord[]>([]);
|
||||
|
||||
const isConversational = computed(
|
||||
() => dashboardDone.value && dashboardFinalToolCalls.value.length === 0
|
||||
);
|
||||
|
||||
const QUICK_ACTIONS = [
|
||||
"What's due today?",
|
||||
"Events this week?",
|
||||
@@ -251,38 +238,8 @@ const QUICK_ACTIONS = [
|
||||
"My high priority tasks?",
|
||||
];
|
||||
|
||||
async function onChatSubmit(payload: { content: string; contextNoteId?: number }) {
|
||||
dashboardConvId.value = null;
|
||||
dashboardDone.value = false;
|
||||
dashboardFinalContent.value = "";
|
||||
dashboardFinalToolCalls.value = [];
|
||||
dashboardQuery.value = payload.content;
|
||||
|
||||
const conv = await chatStore.createConversation();
|
||||
await chatStore.fetchConversation(conv.id);
|
||||
dashboardConvId.value = conv.id;
|
||||
|
||||
await chatStore.sendMessage(payload.content, payload.contextNoteId);
|
||||
|
||||
const msgs = chatStore.currentConversation?.messages ?? [];
|
||||
const lastAssistant = [...msgs]
|
||||
.reverse()
|
||||
.find((m: Message) => m.role === "assistant");
|
||||
dashboardFinalContent.value = lastAssistant?.content ?? "";
|
||||
dashboardFinalToolCalls.value = (lastAssistant?.tool_calls ?? []) as ToolCallRecord[];
|
||||
dashboardDone.value = true;
|
||||
}
|
||||
|
||||
async function onQuickAction(query: string) {
|
||||
await onChatSubmit({ content: query });
|
||||
}
|
||||
|
||||
function clearDashboardResponse() {
|
||||
dashboardConvId.value = null;
|
||||
dashboardDone.value = false;
|
||||
dashboardQuery.value = "";
|
||||
dashboardFinalContent.value = "";
|
||||
dashboardFinalToolCalls.value = [];
|
||||
await chatPanelRef.value?.send(query);
|
||||
}
|
||||
|
||||
// ─── Upcoming events slide-over ───────────────────────────────────────────────
|
||||
@@ -304,28 +261,8 @@ function onEventDeleted(id: number) {
|
||||
}
|
||||
|
||||
function formatUpcomingTime(event: EventEntry): string {
|
||||
if (event.all_day) return "All day";
|
||||
if (!event.start_dt) return "";
|
||||
try {
|
||||
const d = new Date(event.start_dt);
|
||||
const today = new Date();
|
||||
const tomorrow = new Date(today);
|
||||
tomorrow.setDate(today.getDate() + 1);
|
||||
const isToday =
|
||||
d.getFullYear() === today.getFullYear() &&
|
||||
d.getMonth() === today.getMonth() &&
|
||||
d.getDate() === today.getDate();
|
||||
const isTomorrow =
|
||||
d.getFullYear() === tomorrow.getFullYear() &&
|
||||
d.getMonth() === tomorrow.getMonth() &&
|
||||
d.getDate() === tomorrow.getDate();
|
||||
const timeStr = d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
|
||||
if (isToday) return `Today ${timeStr}`;
|
||||
if (isTomorrow) return `Tomorrow ${timeStr}`;
|
||||
return d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" }) + " " + timeStr;
|
||||
} catch {
|
||||
return event.start_dt;
|
||||
}
|
||||
return fmtRelativeDateTime(event.start_dt, event.all_day);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -343,38 +280,9 @@ function formatUpcomingTime(event: EventEntry): string {
|
||||
@click="onQuickAction(q)"
|
||||
>{{ q }}</button>
|
||||
</div>
|
||||
<DashboardChatInput ref="chatInputRef" @submit="onChatSubmit" />
|
||||
<ChatPanel ref="chatPanelRef" variant="widget" />
|
||||
</section>
|
||||
|
||||
<!-- ── Inline response ────────────────────────────────────── -->
|
||||
<div v-if="dashboardConvId" class="dashboard-response">
|
||||
<div class="dashboard-response-query">{{ dashboardQuery }}</div>
|
||||
<div v-if="chatStore.streaming && chatStore.streamingToolCalls.length" class="dashboard-tool-calls">
|
||||
<ToolCallCard v-for="(tc, i) in chatStore.streamingToolCalls" :key="i" :tool-call="tc" />
|
||||
</div>
|
||||
<div v-else-if="dashboardDone && dashboardFinalToolCalls.length" class="dashboard-tool-calls">
|
||||
<ToolCallCard v-for="(tc, i) in dashboardFinalToolCalls" :key="i" :tool-call="tc" />
|
||||
</div>
|
||||
<div v-if="chatStore.streaming" class="dashboard-response-text streaming">
|
||||
<div v-if="chatStore.streamingStatus && !chatStore.streamingContent" class="dashboard-status-line">
|
||||
<span class="dashboard-status-dot"></span>{{ chatStore.streamingStatus }}
|
||||
</div>
|
||||
<span v-else-if="chatStore.streamingContent">{{ chatStore.streamingContent }}</span>
|
||||
<span v-else class="thinking-dots">...</span>
|
||||
</div>
|
||||
<div v-else-if="dashboardDone && dashboardFinalContent" class="dashboard-response-text">
|
||||
{{ dashboardFinalContent }}
|
||||
</div>
|
||||
<div class="dashboard-response-actions" :class="{ conversational: isConversational }">
|
||||
<router-link
|
||||
:to="`/chat/${dashboardConvId}`"
|
||||
class="btn-open-chat"
|
||||
:class="{ prominent: isConversational }"
|
||||
>{{ isConversational ? 'Continue the conversation →' : 'Think it through in Chat →' }}</router-link>
|
||||
<button class="btn-clear-response" @click="clearDashboardResponse">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Upcoming events ────────────────────────────────────── -->
|
||||
<div v-if="!loading && upcomingEvents.length" class="upcoming-events-section">
|
||||
<div class="section-header">
|
||||
@@ -593,16 +501,20 @@ function formatUpcomingTime(event: EventEntry): string {
|
||||
|
||||
<style scoped>
|
||||
.home {
|
||||
max-width: 1100px;
|
||||
max-width: var(--page-max-width);
|
||||
margin: 2rem auto;
|
||||
padding: 0 1.5rem;
|
||||
padding: 0 var(--page-padding-x);
|
||||
}
|
||||
|
||||
/* ─── Chat widget ────────────────────────────────────────────── */
|
||||
.chat-section { margin-bottom: 1rem; }
|
||||
.chat-section {
|
||||
max-width: 720px;
|
||||
margin: 0 auto 1.5rem;
|
||||
}
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
@@ -623,91 +535,6 @@ function formatUpcomingTime(event: EventEntry): string {
|
||||
}
|
||||
.quick-action-chip:disabled { opacity: 0.4; cursor: default; }
|
||||
|
||||
/* ─── Inline response ────────────────────────────────────────── */
|
||||
.dashboard-response {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--color-bg-card);
|
||||
border-left: 2px solid var(--color-primary);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--color-bubble-asst-shadow);
|
||||
}
|
||||
.dashboard-response-query {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.dashboard-tool-calls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.dashboard-response-text {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.55;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
.dashboard-response-text.streaming { color: var(--color-text-muted); }
|
||||
.thinking-dots { display: inline-block; animation: blink 1.2s infinite; }
|
||||
.dashboard-status-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-style: italic;
|
||||
}
|
||||
.dashboard-status-dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
animation: blink 1.2s infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
.dashboard-response-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
.btn-open-chat {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
.btn-open-chat:hover { text-decoration: underline; }
|
||||
.btn-open-chat.prominent {
|
||||
background: linear-gradient(135deg, #6366f1, #4f46e5);
|
||||
color: #fff;
|
||||
padding: 0.35rem 0.85rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.9rem;
|
||||
box-shadow: 0 1px 6px rgba(99, 102, 241, 0.25);
|
||||
}
|
||||
.btn-open-chat.prominent:hover {
|
||||
text-decoration: none;
|
||||
box-shadow: 0 3px 12px rgba(99, 102, 241, 0.45);
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
.btn-clear-response {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
.btn-clear-response:hover { color: var(--color-text); }
|
||||
|
||||
/* ─── Skeleton loading ───────────────────────────────────────── */
|
||||
.skeleton-hero {
|
||||
height: 180px;
|
||||
@@ -1034,7 +861,7 @@ function formatUpcomingTime(event: EventEntry): string {
|
||||
|
||||
/* ─── Mobile ─────────────────────────────────────────────────── */
|
||||
@media (max-width: 680px) {
|
||||
.home { padding: 0 1rem; margin: 1rem auto; }
|
||||
.home { padding: 0 var(--page-padding-x); margin: 1rem auto; }
|
||||
.hero-top { flex-direction: column; align-items: flex-start; }
|
||||
.btn-workspace-hero { width: 100%; justify-content: center; }
|
||||
.projects-grid { grid-template-columns: 1fr; }
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,406 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
getBriefingFeeds,
|
||||
postRssReaction,
|
||||
deleteRssReaction,
|
||||
getNewsItems,
|
||||
openArticleInChat,
|
||||
type BriefingFeed,
|
||||
} from '@/api/client'
|
||||
import type { NewsItem } from '@/types/news'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const LIMIT = 40
|
||||
|
||||
const items = ref<NewsItem[]>([])
|
||||
const offset = ref(0)
|
||||
const hasMore = ref(true)
|
||||
const loading = ref(false)
|
||||
const feeds = ref<BriefingFeed[]>([])
|
||||
const selectedFeedId = ref<number | null>(null)
|
||||
|
||||
// Reactions map: item id → current reaction
|
||||
const reactions = ref<Record<number, 'up' | 'down' | null>>({})
|
||||
// Track which items are currently being opened in chat
|
||||
const openingChat = ref<Set<number>>(new Set())
|
||||
|
||||
async function loadMore() {
|
||||
if (loading.value || !hasMore.value) return
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await getNewsItems({
|
||||
days: 90,
|
||||
limit: LIMIT,
|
||||
offset: offset.value,
|
||||
feed_id: selectedFeedId.value,
|
||||
})
|
||||
for (const item of data.items) {
|
||||
if (reactions.value[item.id] === undefined) {
|
||||
reactions.value[item.id] = item.reaction
|
||||
}
|
||||
}
|
||||
items.value = [...items.value, ...data.items]
|
||||
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'
|
||||
const days = Math.floor(diffH / 24)
|
||||
if (days < 7) return `${days}d ago`
|
||||
return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
|
||||
}
|
||||
|
||||
async function openInChat(itemId: number) {
|
||||
if (openingChat.value.has(itemId)) return
|
||||
openingChat.value.add(itemId)
|
||||
try {
|
||||
const result = await openArticleInChat(itemId)
|
||||
router.push(`/chat/${result.conversation_id}`)
|
||||
} catch {
|
||||
// silently fail — button returns to enabled state
|
||||
} finally {
|
||||
openingChat.value.delete(itemId)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
feeds.value = await getBriefingFeeds().catch(() => [])
|
||||
await loadMore()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="news-root">
|
||||
<div class="news-header">
|
||||
<div class="news-header-left">
|
||||
<h1 class="news-title">News</h1>
|
||||
<span class="news-subtitle">Last 90 days</span>
|
||||
</div>
|
||||
<div class="news-header-right">
|
||||
<select
|
||||
v-model="selectedFeedId"
|
||||
class="feed-select"
|
||||
@change="onFeedChange"
|
||||
>
|
||||
<option :value="null">All feeds</option>
|
||||
<option v-for="feed in feeds" :key="feed.id" :value="feed.id">
|
||||
{{ feed.title }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-list">
|
||||
<div v-if="!items.length && !loading" class="news-empty">
|
||||
No articles found for the selected feed.
|
||||
</div>
|
||||
|
||||
<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 v-if="item.topics?.length" class="news-topics">
|
||||
<span v-for="topic in item.topics" :key="topic" class="news-topic">{{ topic }}</span>
|
||||
</div>
|
||||
<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>
|
||||
<button
|
||||
class="reaction-btn open-chat-btn"
|
||||
:class="{ busy: openingChat.has(item.id) }"
|
||||
:disabled="openingChat.has(item.id)"
|
||||
@click="openInChat(item.id)"
|
||||
title="Discuss in chat"
|
||||
>{{ openingChat.has(item.id) ? '…' : '💬' }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-footer">
|
||||
<button
|
||||
v-if="hasMore"
|
||||
class="btn-load-more"
|
||||
@click="loadMore"
|
||||
:disabled="loading"
|
||||
>{{ loading ? 'Loading…' : 'Load more' }}</button>
|
||||
<div v-if="loading && !items.length" class="news-loading">Loading…</div>
|
||||
<p v-if="!hasMore && items.length" class="news-end">All articles loaded</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.news-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.news-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.25rem 1.5rem 1rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.news-header-left {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.news-subtitle {
|
||||
font-size: 0.82rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.news-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.feed-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;
|
||||
}
|
||||
|
||||
.news-list {
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
max-width: 860px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.news-empty,
|
||||
.news-loading {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.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: 600;
|
||||
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.95rem;
|
||||
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.82rem;
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-topics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.news-topic {
|
||||
font-size: 0.68rem;
|
||||
padding: 0.15rem 0.5rem;
|
||||
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||
color: var(--color-primary);
|
||||
border-radius: 99px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.news-reactions {
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.reaction-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
padding: 0.1rem 0.4rem;
|
||||
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);
|
||||
}
|
||||
|
||||
.open-chat-btn {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.open-chat-btn.busy {
|
||||
opacity: 0.4;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.news-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 1rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.btn-load-more {
|
||||
padding: 0.5rem 1.5rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: all 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);
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed, nextTick, watch } from "vue";
|
||||
import { ref, reactive, onMounted, onUnmounted, computed, nextTick, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import type { NoteType } from "@/types/note";
|
||||
import { useNotesStore } from "@/stores/notes";
|
||||
import { useToastStore } from "@/stores/toast";
|
||||
import { renderMarkdown } from "@/utils/markdown";
|
||||
@@ -31,6 +32,8 @@ const body = ref("");
|
||||
const tags = ref<string[]>([]);
|
||||
const projectId = ref<number | null>(null);
|
||||
const milestoneId = ref<number | null>(null);
|
||||
const noteType = ref<NoteType>("note");
|
||||
const entityMeta = reactive<Record<string, string>>({});
|
||||
const dirty = ref(false);
|
||||
const saving = ref(false);
|
||||
const showPreview = ref(false);
|
||||
@@ -186,6 +189,8 @@ let savedBody = "";
|
||||
let savedTags: string[] = [];
|
||||
let savedProjectId: number | null = null;
|
||||
let savedMilestoneId: number | null = null;
|
||||
let savedNoteType: NoteType = "note";
|
||||
let savedEntityMeta: Record<string, string> = {};
|
||||
|
||||
function markDirty() {
|
||||
dirty.value =
|
||||
@@ -193,7 +198,9 @@ function markDirty() {
|
||||
body.value !== savedBody ||
|
||||
JSON.stringify(tags.value) !== JSON.stringify(savedTags) ||
|
||||
projectId.value !== savedProjectId ||
|
||||
milestoneId.value !== savedMilestoneId;
|
||||
milestoneId.value !== savedMilestoneId ||
|
||||
noteType.value !== savedNoteType ||
|
||||
JSON.stringify(entityMeta) !== JSON.stringify(savedEntityMeta);
|
||||
}
|
||||
|
||||
function onBodyUpdate(newVal: string) {
|
||||
@@ -210,24 +217,34 @@ onMounted(async () => {
|
||||
tags.value = [...(store.currentNote.tags || [])];
|
||||
projectId.value = store.currentNote.project_id ?? null;
|
||||
milestoneId.value = store.currentNote.milestone_id ?? null;
|
||||
noteType.value = (store.currentNote.note_type as NoteType) || "note";
|
||||
Object.assign(entityMeta, store.currentNote.metadata || {});
|
||||
savedTitle = title.value;
|
||||
savedBody = body.value;
|
||||
savedTags = [...tags.value];
|
||||
savedProjectId = projectId.value;
|
||||
savedMilestoneId = milestoneId.value;
|
||||
savedNoteType = noteType.value;
|
||||
savedEntityMeta = { ...entityMeta };
|
||||
}
|
||||
|
||||
// Restore pending draft if any
|
||||
try {
|
||||
const draft = await apiGet<NoteDraft>(`/api/notes/${noteId.value}/draft`);
|
||||
if (draft) assist.loadDraft(draft);
|
||||
} catch {
|
||||
// No draft — normal
|
||||
} else {
|
||||
// New note: read type from query param
|
||||
const qt = route.query.type as string | undefined;
|
||||
if (qt && ["note", "person", "place", "list"].includes(qt)) {
|
||||
noteType.value = qt as NoteType;
|
||||
}
|
||||
|
||||
// Initial link suggestions
|
||||
fetchLinkSuggestions();
|
||||
}
|
||||
|
||||
// Restore pending draft if any
|
||||
try {
|
||||
const draft = await apiGet<NoteDraft>(`/api/notes/${noteId.value}/draft`);
|
||||
if (draft) assist.loadDraft(draft);
|
||||
} catch {
|
||||
// No draft — normal
|
||||
}
|
||||
|
||||
// Initial link suggestions
|
||||
fetchLinkSuggestions();
|
||||
});
|
||||
|
||||
async function save() {
|
||||
@@ -241,12 +258,16 @@ async function save() {
|
||||
tags: tags.value,
|
||||
project_id: projectId.value,
|
||||
milestone_id: milestoneId.value,
|
||||
note_type: noteType.value,
|
||||
metadata: { ...entityMeta },
|
||||
});
|
||||
savedTitle = title.value;
|
||||
savedBody = body.value;
|
||||
savedTags = [...tags.value];
|
||||
savedProjectId = projectId.value;
|
||||
savedMilestoneId = milestoneId.value;
|
||||
savedNoteType = noteType.value;
|
||||
savedEntityMeta = { ...entityMeta };
|
||||
dirty.value = false;
|
||||
toast.show("Note saved");
|
||||
} else {
|
||||
@@ -256,6 +277,8 @@ async function save() {
|
||||
tags: tags.value,
|
||||
project_id: projectId.value,
|
||||
milestone_id: milestoneId.value,
|
||||
note_type: noteType.value,
|
||||
metadata: { ...entityMeta },
|
||||
});
|
||||
dirty.value = false;
|
||||
toast.show("Note created");
|
||||
@@ -295,12 +318,15 @@ async function doAutoSave() {
|
||||
await store.updateNote(noteId.value!, {
|
||||
title: title.value, body: body.value, tags: tags.value,
|
||||
project_id: projectId.value, milestone_id: milestoneId.value,
|
||||
} as Record<string, unknown>);
|
||||
note_type: noteType.value, metadata: { ...entityMeta },
|
||||
});
|
||||
savedTitle = title.value;
|
||||
savedBody = body.value;
|
||||
savedTags = [...tags.value];
|
||||
savedProjectId = projectId.value;
|
||||
savedMilestoneId = milestoneId.value;
|
||||
savedNoteType = noteType.value;
|
||||
savedEntityMeta = { ...entityMeta };
|
||||
dirty.value = false;
|
||||
toast.show("Auto-saved");
|
||||
} catch {
|
||||
@@ -439,6 +465,49 @@ onUnmounted(() => assist.clearSelection());
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Note type -->
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Type</label>
|
||||
<select v-model="noteType" class="sb-select" @change="markDirty">
|
||||
<option value="note">Note</option>
|
||||
<option value="person">Person</option>
|
||||
<option value="place">Place</option>
|
||||
<option value="list">List</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Person metadata -->
|
||||
<template v-if="noteType === 'person'">
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Relationship</label>
|
||||
<input class="sb-input" v-model="entityMeta.relationship" placeholder="e.g. Friend, Colleague" @input="markDirty" />
|
||||
</div>
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Email</label>
|
||||
<input class="sb-input" v-model="entityMeta.email" type="email" placeholder="email@example.com" @input="markDirty" />
|
||||
</div>
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Phone</label>
|
||||
<input class="sb-input" v-model="entityMeta.phone" type="tel" placeholder="+1 555 000 0000" @input="markDirty" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Place metadata -->
|
||||
<template v-if="noteType === 'place'">
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Address</label>
|
||||
<input class="sb-input" v-model="entityMeta.address" placeholder="Street, City" @input="markDirty" />
|
||||
</div>
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Phone</label>
|
||||
<input class="sb-input" v-model="entityMeta.phone" type="tel" placeholder="+1 555 000 0000" @input="markDirty" />
|
||||
</div>
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Hours</label>
|
||||
<input class="sb-input" v-model="entityMeta.hours" placeholder="e.g. Mon–Fri 9–5" @input="markDirty" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Link Suggestions -->
|
||||
<div v-if="linkSuggestions.length > 0" class="sb-field link-suggest-field">
|
||||
<div class="sb-label-row">
|
||||
@@ -649,6 +718,22 @@ onUnmounted(() => assist.clearSelection());
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sb-select, .sb-input {
|
||||
width: 100%;
|
||||
padding: 5px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--color-input-border, rgba(255,255,255,0.12));
|
||||
background: var(--color-bg-tertiary, rgba(255,255,255,0.04));
|
||||
color: var(--color-text);
|
||||
font-size: 0.82rem;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.sb-select:focus, .sb-input:focus {
|
||||
border-color: var(--color-primary, #6366f1);
|
||||
}
|
||||
|
||||
/* Tag suggest row inside sidebar */
|
||||
.tag-suggest-row {
|
||||
display: flex;
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useRoute, useRouter } from "vue-router";
|
||||
import { useNotesStore } from "@/stores/notes";
|
||||
import { renderMarkdown } from "@/utils/markdown";
|
||||
import { relativeTime } from "@/composables/useRelativeTime";
|
||||
import { apiPost, apiGet } from "@/api/client";
|
||||
import { apiPost, apiGet, apiPatch } from "@/api/client";
|
||||
import type { Note } from "@/types/note";
|
||||
import TagPill from "@/components/TagPill.vue";
|
||||
import TableOfContents from "@/components/TableOfContents.vue";
|
||||
@@ -79,11 +79,48 @@ watch(() => route.params.id, (newId) => {
|
||||
if (newId) loadNote(Number(newId));
|
||||
});
|
||||
|
||||
const isListNote = computed(() => {
|
||||
const body = store.currentNote?.body ?? "";
|
||||
return /^- \[[ xX]\] /m.test(body);
|
||||
});
|
||||
|
||||
const renderedBody = computed(() => {
|
||||
if (!store.currentNote) return "";
|
||||
return renderMarkdown(store.currentNote.body);
|
||||
return renderMarkdown(store.currentNote.body, { interactiveCheckboxes: isListNote.value });
|
||||
});
|
||||
|
||||
async function onBodyChange(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
if (target.type !== "checkbox" || !store.currentNote) return;
|
||||
|
||||
const index = parseInt(target.dataset.taskIndex ?? "", 10);
|
||||
if (isNaN(index)) return;
|
||||
|
||||
let taskIdx = 0;
|
||||
const newBody = store.currentNote.body.split("\n").map(line => {
|
||||
const stripped = line.trimStart();
|
||||
if (stripped.startsWith("- [ ] ") || stripped.startsWith("- [x] ") || stripped.startsWith("- [X] ")) {
|
||||
if (taskIdx === index) {
|
||||
const indent = line.length - stripped.length;
|
||||
const wasChecked = !stripped.startsWith("- [ ] ");
|
||||
taskIdx++;
|
||||
return " ".repeat(indent) + (wasChecked ? "- [ ] " : "- [x] ") + stripped.slice(6);
|
||||
}
|
||||
taskIdx++;
|
||||
}
|
||||
return line;
|
||||
}).join("\n");
|
||||
|
||||
// Optimistic update so the checkbox state doesn't snap back
|
||||
store.currentNote.body = newBody;
|
||||
|
||||
try {
|
||||
await apiPatch(`/api/notes/${store.currentNote.id}`, { body: newBody });
|
||||
} catch {
|
||||
await store.fetchNote(store.currentNote.id);
|
||||
}
|
||||
}
|
||||
|
||||
async function onBodyClick(e: MouseEvent) {
|
||||
const target = e.target as HTMLElement;
|
||||
|
||||
@@ -220,8 +257,10 @@ async function convertToTask() {
|
||||
</div>
|
||||
<div
|
||||
class="body prose"
|
||||
:class="{ 'prose--checklist': isListNote }"
|
||||
v-html="renderedBody"
|
||||
@click="onBodyClick"
|
||||
@change="onBodyChange"
|
||||
></div>
|
||||
|
||||
<div v-if="backlinks.length" class="backlinks">
|
||||
|
||||
@@ -192,9 +192,9 @@ function onOffsetUpdate(offset: number) {
|
||||
|
||||
<style scoped>
|
||||
.notes-list {
|
||||
max-width: 1200px;
|
||||
max-width: var(--page-max-width);
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
padding: 0 var(--page-padding-x);
|
||||
overflow-x: clip;
|
||||
}
|
||||
.header {
|
||||
|
||||
@@ -16,11 +16,15 @@ interface MilestoneSummary {
|
||||
|
||||
interface Project {
|
||||
id: number;
|
||||
user_id: number;
|
||||
title: string;
|
||||
description: string | null;
|
||||
goal: string | null;
|
||||
status: "active" | "completed" | "archived";
|
||||
color: string | null;
|
||||
auto_summary: string | null;
|
||||
permission?: string;
|
||||
is_shared?: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
summary?: {
|
||||
@@ -54,19 +58,8 @@ async function loadProjects() {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
const data = await apiGet<{ projects: Project[] }>("/api/projects");
|
||||
const data = await apiGet<{ projects: Project[] }>("/api/projects?include_summary=true");
|
||||
projects.value = data.projects;
|
||||
// Fetch summaries (including milestone_summary) in parallel
|
||||
await Promise.allSettled(
|
||||
projects.value.map(async (p) => {
|
||||
try {
|
||||
const full = await apiGet<Project>(`/api/projects/${p.id}`);
|
||||
p.summary = full.summary;
|
||||
} catch {
|
||||
// non-fatal
|
||||
}
|
||||
})
|
||||
);
|
||||
} catch {
|
||||
error.value = "Failed to load projects.";
|
||||
} finally {
|
||||
@@ -253,9 +246,9 @@ function truncate(text: string | null, max = 120): string {
|
||||
|
||||
<style scoped>
|
||||
.projects-list {
|
||||
max-width: 1200px;
|
||||
max-width: var(--page-max-width);
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
padding: 0 var(--page-padding-x);
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
|
||||
@@ -19,11 +19,14 @@ interface Milestone {
|
||||
|
||||
interface Project {
|
||||
id: number;
|
||||
user_id: number;
|
||||
title: string;
|
||||
description: string | null;
|
||||
goal: string | null;
|
||||
status: "active" | "completed" | "archived";
|
||||
color: string | null;
|
||||
auto_summary: string | null;
|
||||
permission?: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
summary?: {
|
||||
@@ -639,9 +642,9 @@ async function confirmDelete() {
|
||||
<style scoped>
|
||||
/* ── Layout ─────────────────────────────────────────────────── */
|
||||
.project-view {
|
||||
max-width: 1200px;
|
||||
max-width: var(--page-max-width);
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
padding: 0 var(--page-padding-x);
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
|
||||
+996
-111
File diff suppressed because it is too large
Load Diff
@@ -12,6 +12,7 @@ import { useTagSuggestions } from "@/composables/useTagSuggestions";
|
||||
import { useFloatingAssist } from "@/composables/useFloatingAssist";
|
||||
import { apiPost, apiGet, apiPatch } from "@/api/client";
|
||||
import type { TaskStatus, TaskPriority } from "@/types/task";
|
||||
import type { Note } from "@/types/note";
|
||||
import type { Editor } from "@tiptap/vue-3";
|
||||
import MarkdownToolbar from "@/components/MarkdownToolbar.vue";
|
||||
import TiptapEditor from "@/components/TiptapEditor.vue";
|
||||
@@ -23,6 +24,7 @@ import TaskLogSection from "@/components/TaskLogSection.vue";
|
||||
import DiffView from "@/components/DiffView.vue";
|
||||
import ConfirmDialog from "@/components/ConfirmDialog.vue";
|
||||
import VersionHistorySection from "@/components/VersionHistorySection.vue";
|
||||
import RecurrenceEditor from "@/components/RecurrenceEditor.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@@ -40,6 +42,9 @@ const projectId = ref<number | null>(null);
|
||||
const milestoneId = ref<number | null>(null);
|
||||
const parentId = ref<number | null>(null);
|
||||
const parentTitle = ref("");
|
||||
const startedAt = ref<string | null>(null);
|
||||
const completedAt = ref<string | null>(null);
|
||||
const recurrenceRule = ref<Record<string, unknown> | null>(null);
|
||||
const parentSearchQuery = ref("");
|
||||
const parentSearchResults = ref<{ id: number; title: string }[]>([]);
|
||||
const parentSearchLoading = ref(false);
|
||||
@@ -274,6 +279,10 @@ onMounted(async () => {
|
||||
parentId.value = (taskRec.parent_id as number | null) ?? null;
|
||||
parentTitle.value = (taskRec.parent_title as string | null) ?? "";
|
||||
parentSearchQuery.value = parentTitle.value;
|
||||
const noteTask = store.currentTask as unknown as Note;
|
||||
startedAt.value = noteTask.started_at ?? null;
|
||||
completedAt.value = noteTask.completed_at ?? null;
|
||||
recurrenceRule.value = noteTask.recurrence_rule ?? null;
|
||||
savedTitle = title.value;
|
||||
savedBody = body.value;
|
||||
savedTags = [...tags.value];
|
||||
@@ -309,6 +318,7 @@ async function save() {
|
||||
project_id: projectId.value,
|
||||
milestone_id: milestoneId.value,
|
||||
parent_id: parentId.value,
|
||||
recurrence_rule: recurrenceRule.value,
|
||||
};
|
||||
if (isEditing.value) {
|
||||
await store.updateTask(taskId.value!, data);
|
||||
@@ -323,7 +333,7 @@ async function save() {
|
||||
savedParentId = parentId.value;
|
||||
dirty.value = false;
|
||||
toast.show("Task saved");
|
||||
window.location.reload();
|
||||
router.push(`/tasks/${taskId.value}`);
|
||||
} else {
|
||||
const task = await store.createTask(data);
|
||||
dirty.value = false;
|
||||
@@ -373,6 +383,7 @@ async function doAutoSave() {
|
||||
project_id: projectId.value,
|
||||
milestone_id: milestoneId.value,
|
||||
parent_id: parentId.value,
|
||||
recurrence_rule: recurrenceRule.value,
|
||||
} as Record<string, unknown>);
|
||||
savedTitle = title.value;
|
||||
savedBody = body.value;
|
||||
@@ -483,8 +494,19 @@ useEditorGuards(dirty, save);
|
||||
<option value="todo">Todo</option>
|
||||
<option value="in_progress">In Progress</option>
|
||||
<option value="done">Done</option>
|
||||
<option value="cancelled">Cancelled</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="startedAt || completedAt" class="sb-timestamps">
|
||||
<div v-if="startedAt" class="sb-timestamp">
|
||||
<span class="sb-ts-label">Started</span>
|
||||
<span class="sb-ts-value">{{ new Date(startedAt).toLocaleString() }}</span>
|
||||
</div>
|
||||
<div v-if="completedAt" class="sb-timestamp">
|
||||
<span class="sb-ts-label">Completed</span>
|
||||
<span class="sb-ts-value">{{ new Date(completedAt).toLocaleString() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Priority</label>
|
||||
<select v-model="priority" @change="markDirty" class="sb-select">
|
||||
@@ -498,6 +520,10 @@ useEditorGuards(dirty, save);
|
||||
<label class="sb-label">Due Date</label>
|
||||
<input v-model="dueDate" type="date" class="sb-input" @input="markDirty" />
|
||||
</div>
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Recurrence</label>
|
||||
<RecurrenceEditor v-model="recurrenceRule" @update:modelValue="markDirty" />
|
||||
</div>
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Project</label>
|
||||
<ProjectSelector v-model="projectId" @update:modelValue="markDirty" />
|
||||
@@ -903,6 +929,28 @@ useEditorGuards(dirty, save);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Lifecycle timestamps */
|
||||
.sb-timestamps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.sb-timestamp {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.sb-ts-label {
|
||||
color: var(--color-text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sb-ts-value {
|
||||
color: var(--color-text-secondary);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Narrow screen: sidebar collapses */
|
||||
@media (max-width: 720px) {
|
||||
.task-body { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
|
||||
|
||||
@@ -33,12 +33,14 @@ const statusCycle: Record<TaskStatus, TaskStatus> = {
|
||||
todo: "in_progress",
|
||||
in_progress: "done",
|
||||
done: "todo",
|
||||
cancelled: "todo",
|
||||
};
|
||||
|
||||
const statusDotClass: Record<TaskStatus, string> = {
|
||||
todo: "dot-todo",
|
||||
in_progress: "dot-in-progress",
|
||||
done: "dot-done",
|
||||
cancelled: "dot-cancelled",
|
||||
};
|
||||
|
||||
function cycleSubTaskStatus(subTask: Note) {
|
||||
@@ -137,8 +139,25 @@ const forwardStatus: Record<TaskStatus, TaskStatus | null> = {
|
||||
todo: "in_progress",
|
||||
in_progress: "done",
|
||||
done: null,
|
||||
cancelled: null,
|
||||
};
|
||||
|
||||
function recurrenceSummary(rule: Record<string, unknown> | null): string | null {
|
||||
if (!rule) return null;
|
||||
if (rule.type === "interval") {
|
||||
return `Every ${rule.every} ${rule.unit}(s)`;
|
||||
}
|
||||
if (rule.type === "calendar") {
|
||||
if (rule.unit === "month") return `Monthly on day ${rule.day_of_month}`;
|
||||
if (rule.unit === "year") {
|
||||
const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
|
||||
const m = months[((rule.month as number) ?? 1) - 1];
|
||||
return `Yearly on ${m} ${rule.day_of_month}`;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
const advanceLabel = computed(() => {
|
||||
const s = store.currentTask?.status as TaskStatus | undefined;
|
||||
if (!s) return null;
|
||||
@@ -318,6 +337,17 @@ const subTaskProgress = computed(() => {
|
||||
Due: {{ store.currentTask.due_date }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="task-meta-row" v-if="store.currentTask.started_at || store.currentTask.completed_at || store.currentTask.recurrence_rule">
|
||||
<span v-if="store.currentTask.started_at" class="task-meta-item">
|
||||
Started: {{ new Date(store.currentTask.started_at).toLocaleString() }}
|
||||
</span>
|
||||
<span v-if="store.currentTask.completed_at" class="task-meta-item">
|
||||
Completed: {{ new Date(store.currentTask.completed_at).toLocaleString() }}
|
||||
</span>
|
||||
<span v-if="recurrenceSummary(store.currentTask.recurrence_rule as Record<string, unknown> | null)" class="task-meta-item task-meta-recurrence">
|
||||
↻ {{ recurrenceSummary(store.currentTask.recurrence_rule as Record<string, unknown> | null) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="tags" v-if="store.currentTask.tags.length">
|
||||
<TagPill
|
||||
v-for="tag in store.currentTask.tags"
|
||||
@@ -551,6 +581,20 @@ const subTaskProgress = computed(() => {
|
||||
color: var(--color-overdue);
|
||||
font-weight: 600;
|
||||
}
|
||||
.task-meta-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.task-meta-item {
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.task-meta-recurrence {
|
||||
color: var(--color-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
@@ -637,6 +681,9 @@ const subTaskProgress = computed(() => {
|
||||
.dot-done {
|
||||
background: var(--color-status-done, #22c55e);
|
||||
}
|
||||
.dot-cancelled {
|
||||
background: var(--color-text-muted, #6b7280);
|
||||
}
|
||||
.sub-title {
|
||||
flex: 1;
|
||||
font-size: 0.9rem;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useTasksStore } from "@/stores/tasks";
|
||||
import type { Task, TaskStatus } from "@/types/task";
|
||||
import type { Task, TaskStatus, TaskPriority } from "@/types/task";
|
||||
import { apiGet } from "@/api/client";
|
||||
import { useListKeyboardNavigation } from "@/composables/useListKeyboardNavigation";
|
||||
import SearchBar from "@/components/SearchBar.vue";
|
||||
@@ -122,7 +122,8 @@ onMounted(async () => {
|
||||
store.activeTagFilters = tags;
|
||||
}
|
||||
if (route.query.status) {
|
||||
store.statusFilter = route.query.status as TaskStatus;
|
||||
const qs = route.query.status;
|
||||
store.statusFilter = (Array.isArray(qs) ? qs : [qs]).filter(Boolean) as TaskStatus[];
|
||||
}
|
||||
store.limit = viewMode.value === "grouped" ? 100 : 200;
|
||||
collapsedGroups.value.add("done");
|
||||
@@ -150,14 +151,20 @@ function onSearch(q: string) {
|
||||
store.setSearch(q);
|
||||
}
|
||||
|
||||
function onStatusFilterChange(e: Event) {
|
||||
const value = (e.target as HTMLSelectElement).value;
|
||||
store.setStatusFilter(value as TaskStatus | "");
|
||||
function toggleStatusChip(value: TaskStatus) {
|
||||
const current = [...store.statusFilter];
|
||||
const idx = current.indexOf(value);
|
||||
if (idx === -1) current.push(value);
|
||||
else current.splice(idx, 1);
|
||||
store.setStatusFilter(current);
|
||||
}
|
||||
|
||||
function onPriorityFilterChange(e: Event) {
|
||||
const value = (e.target as HTMLSelectElement).value;
|
||||
store.setPriorityFilter(value as any);
|
||||
function togglePriorityChip(value: TaskPriority) {
|
||||
const current = [...store.priorityFilter];
|
||||
const idx = current.indexOf(value);
|
||||
if (idx === -1) current.push(value);
|
||||
else current.splice(idx, 1);
|
||||
store.setPriorityFilter(current);
|
||||
}
|
||||
|
||||
function onTagClick(tag: string) {
|
||||
@@ -210,19 +217,20 @@ function toggleGroup(key: string) {
|
||||
|
||||
<div class="controls">
|
||||
<div class="filter-controls">
|
||||
<select :value="store.statusFilter" @change="onStatusFilterChange" class="filter-select">
|
||||
<option value="">All Statuses</option>
|
||||
<option value="todo">Todo</option>
|
||||
<option value="in_progress">In Progress</option>
|
||||
<option value="done">Done</option>
|
||||
</select>
|
||||
<select :value="store.priorityFilter" @change="onPriorityFilterChange" class="filter-select">
|
||||
<option value="">All Priorities</option>
|
||||
<option value="none">None</option>
|
||||
<option value="low">Low</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="high">High</option>
|
||||
</select>
|
||||
<div class="filter-chip-group">
|
||||
<button v-for="s in (['todo', 'in_progress', 'done', 'cancelled'] as TaskStatus[])" :key="s"
|
||||
:class="['filter-chip', { active: store.statusFilter.includes(s) }]"
|
||||
@click="toggleStatusChip(s)">
|
||||
{{ { todo: 'Todo', in_progress: 'In Progress', done: 'Done', cancelled: 'Cancelled' }[s] }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="filter-chip-group">
|
||||
<button v-for="p in (['low', 'medium', 'high'] as TaskPriority[])" :key="p"
|
||||
:class="['filter-chip', { active: store.priorityFilter.includes(p) }]"
|
||||
@click="togglePriorityChip(p)">
|
||||
{{ p.charAt(0).toUpperCase() + p.slice(1) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-controls">
|
||||
<div class="sort-controls">
|
||||
@@ -270,7 +278,7 @@ function toggleGroup(key: string) {
|
||||
</div>
|
||||
|
||||
<div v-else-if="store.tasks.length === 0" class="empty-state">
|
||||
<template v-if="store.searchQuery || store.activeTagFilters.length || store.statusFilter || store.priorityFilter">
|
||||
<template v-if="store.searchQuery || store.activeTagFilters.length || store.statusFilter.length || store.priorityFilter.length">
|
||||
<p class="empty-title">No tasks match your filters</p>
|
||||
<p class="empty-subtitle">Try adjusting your search or removing filters.</p>
|
||||
</template>
|
||||
@@ -345,9 +353,9 @@ function toggleGroup(key: string) {
|
||||
|
||||
<style scoped>
|
||||
.tasks-list {
|
||||
max-width: 1200px;
|
||||
max-width: var(--page-max-width);
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
padding: 0 var(--page-padding-x);
|
||||
overflow-x: clip;
|
||||
}
|
||||
.header {
|
||||
@@ -382,8 +390,29 @@ function toggleGroup(key: string) {
|
||||
}
|
||||
.filter-controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.filter-chip-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
.filter-chip {
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--color-input-border);
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 0.78rem;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.filter-chip.active {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.right-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -3,18 +3,13 @@ import { ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { apiGet } from "@/api/client";
|
||||
import { useChatStore } from "@/stores/chat";
|
||||
import { useSettingsStore } from "@/stores/settings";
|
||||
import { useToastStore } from "@/stores/toast";
|
||||
import { renderMarkdown } from "@/utils/markdown";
|
||||
import ChatMessage from "@/components/ChatMessage.vue";
|
||||
import ToolCallCard from "@/components/ToolCallCard.vue";
|
||||
import ToolConfirmCard from "@/components/ToolConfirmCard.vue";
|
||||
import ChatPanel from "@/components/ChatPanel.vue";
|
||||
import WorkspaceTaskPanel from "@/components/WorkspaceTaskPanel.vue";
|
||||
import WorkspaceNoteEditor from "@/components/WorkspaceNoteEditor.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const chatStore = useChatStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const toast = useToastStore();
|
||||
|
||||
const projectId = computed(() => Number(route.params.projectId));
|
||||
@@ -26,10 +21,9 @@ interface Project {
|
||||
}
|
||||
|
||||
const project = ref<Project | null>(null);
|
||||
const messageInput = ref("");
|
||||
const messagesEl = ref<HTMLElement | null>(null);
|
||||
const inputEl = ref<HTMLTextAreaElement | null>(null);
|
||||
const chatPanelRef = ref<InstanceType<typeof ChatPanel> | null>(null);
|
||||
const taskPanelRef = ref<InstanceType<typeof WorkspaceTaskPanel> | null>(null);
|
||||
const noteEditorRef = ref<InstanceType<typeof WorkspaceNoteEditor> | null>(null);
|
||||
const activeNoteId = ref<number | null>(null);
|
||||
let workspaceConvId: number | null = null;
|
||||
let isNewConv = false;
|
||||
@@ -64,7 +58,7 @@ const gridColumns = computed(() => {
|
||||
].join(" ");
|
||||
});
|
||||
|
||||
// SSE watcher
|
||||
// SSE watcher — auto-load notes/tasks when tool calls succeed
|
||||
const processedCount = ref(0);
|
||||
|
||||
watch(
|
||||
@@ -78,6 +72,7 @@ watch(
|
||||
tc.result?.data?.id
|
||||
) {
|
||||
activeNoteId.value = tc.result.data.id as number;
|
||||
noteEditorRef.value?.reload();
|
||||
}
|
||||
if (
|
||||
["create_task", "update_task", "create_milestone", "update_milestone"].includes(tc.function) &&
|
||||
@@ -94,29 +89,10 @@ watch(
|
||||
watch(
|
||||
() => chatStore.streaming,
|
||||
(s) => {
|
||||
if (!s) {
|
||||
processedCount.value = 0;
|
||||
scrollToBottom();
|
||||
}
|
||||
if (!s) processedCount.value = 0;
|
||||
}
|
||||
);
|
||||
|
||||
const streamingRendered = computed(() => {
|
||||
if (!chatStore.streamingContent) return "";
|
||||
return renderMarkdown(chatStore.streamingContent);
|
||||
});
|
||||
|
||||
function scrollToBottom() {
|
||||
nextTick(() => {
|
||||
if (messagesEl.value) {
|
||||
messagesEl.value.scrollTop = messagesEl.value.scrollHeight;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
watch(() => chatStore.streamingContent, scrollToBottom);
|
||||
watch(() => chatStore.currentConversation?.messages.length, scrollToBottom);
|
||||
|
||||
function togglePanel(panel: keyof typeof panelOpen.value) {
|
||||
const open = panelOpen.value;
|
||||
const openCount = [open.tasks, open.chat, open.notes].filter(Boolean).length;
|
||||
@@ -126,54 +102,7 @@ function togglePanel(panel: keyof typeof panelOpen.value) {
|
||||
}
|
||||
|
||||
function prefill(text: string) {
|
||||
messageInput.value = text;
|
||||
nextTick(() => inputEl.value?.focus());
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
const content = messageInput.value.trim();
|
||||
if (!content) return;
|
||||
|
||||
messageInput.value = "";
|
||||
resetTextareaHeight();
|
||||
|
||||
await chatStore.sendMessage(
|
||||
content,
|
||||
undefined,
|
||||
undefined,
|
||||
true,
|
||||
undefined,
|
||||
undefined,
|
||||
projectId.value,
|
||||
projectId.value,
|
||||
);
|
||||
scrollToBottom();
|
||||
nextTick(() => inputEl.value?.focus());
|
||||
}
|
||||
|
||||
function onInputKeydown(e: KeyboardEvent) {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendMessage();
|
||||
}
|
||||
if (e.key === "Escape") {
|
||||
// Prevent App.vue from navigating home when textarea is focused
|
||||
e.stopPropagation();
|
||||
inputEl.value?.blur();
|
||||
}
|
||||
}
|
||||
|
||||
function autoResize() {
|
||||
const el = inputEl.value;
|
||||
if (!el) return;
|
||||
el.style.height = "auto";
|
||||
el.style.height = Math.min(el.scrollHeight, 150) + "px";
|
||||
}
|
||||
|
||||
function resetTextareaHeight() {
|
||||
const el = inputEl.value;
|
||||
if (!el) return;
|
||||
el.style.height = "auto";
|
||||
chatPanelRef.value?.prefill(text);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -214,7 +143,7 @@ onMounted(async () => {
|
||||
localStorage.setItem(key, String(conv.id));
|
||||
}
|
||||
|
||||
nextTick(() => inputEl.value?.focus());
|
||||
nextTick(() => chatPanelRef.value?.focus());
|
||||
});
|
||||
|
||||
onUnmounted(async () => {
|
||||
@@ -279,114 +208,30 @@ onUnmounted(async () => {
|
||||
</div>
|
||||
|
||||
<!-- Center: Chat -->
|
||||
<div v-show="panelOpen.chat" class="ws-panel ws-chat-panel">
|
||||
<div class="chat-messages" ref="messagesEl">
|
||||
<template v-if="chatStore.currentConversation">
|
||||
<ChatMessage
|
||||
v-for="msg in chatStore.currentConversation.messages"
|
||||
:key="msg.id"
|
||||
:message="msg"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Streaming bubble -->
|
||||
<div v-if="chatStore.streaming" class="chat-message role-assistant">
|
||||
<div class="message-bubble streaming-bubble">
|
||||
<div class="message-header">
|
||||
<span class="role-label">{{ settingsStore.assistantName }}</span>
|
||||
</div>
|
||||
<div v-if="chatStore.streamingToolCalls.length" class="streaming-tool-calls">
|
||||
<ToolCallCard
|
||||
v-for="(tc, i) in chatStore.streamingToolCalls"
|
||||
:key="i"
|
||||
:tool-call="tc"
|
||||
/>
|
||||
</div>
|
||||
<ToolConfirmCard
|
||||
v-if="chatStore.streamingPendingTool"
|
||||
:pending-tool="chatStore.streamingPendingTool"
|
||||
@accept="chatStore.confirmTool(true)"
|
||||
@decline="chatStore.confirmTool(false)"
|
||||
/>
|
||||
<div v-if="chatStore.streamingStatus" class="streaming-status-line">
|
||||
<span class="streaming-status-dot"></span>
|
||||
{{ chatStore.streamingStatus }}
|
||||
</div>
|
||||
<details
|
||||
v-if="chatStore.streamingThinking"
|
||||
class="thinking-block"
|
||||
:open="!chatStore.streamingContent"
|
||||
>
|
||||
<summary class="thinking-summary">Reasoning</summary>
|
||||
<pre class="thinking-text">{{ chatStore.streamingThinking }}</pre>
|
||||
</details>
|
||||
<div class="message-content prose" v-html="streamingRendered"></div>
|
||||
<span
|
||||
v-if="!chatStore.streamingStatus && !chatStore.streamingThinking"
|
||||
class="typing-indicator"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Queued messages — shown as pending bubbles -->
|
||||
<template v-if="chatStore.queuedMessages.length">
|
||||
<div v-show="panelOpen.chat" class="ws-panel ws-panel-chat">
|
||||
<Transition name="panel-fade">
|
||||
<div v-if="panelOpen.chat" class="panel-inner panel-inner-chat">
|
||||
<!-- Quick chips (shown when conversation is empty) -->
|
||||
<div
|
||||
v-for="(q, i) in chatStore.queuedMessages"
|
||||
:key="`queued-${i}`"
|
||||
class="ws-message role-user queued-message"
|
||||
v-if="chatStore.currentConversation && !chatStore.currentConversation.messages.length && !chatStore.streaming"
|
||||
class="empty-chat-prompt"
|
||||
>
|
||||
<div class="message-bubble queued-bubble">
|
||||
<div class="queued-badge">Queued</div>
|
||||
<div class="message-content">{{ q.content }}</div>
|
||||
<p class="empty-hint">What would you like to work on?</p>
|
||||
<div class="quick-chips">
|
||||
<button class="quick-chip" @click="prefill('Summarize the current status of this project')">📊 Project status</button>
|
||||
<button class="quick-chip" @click="prefill('Create a note about ')">📝 New note</button>
|
||||
<button class="quick-chip" @click="prefill('Add tasks for ')">✓ Add tasks</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="queued-clear-row">
|
||||
<button class="queued-clear-btn" @click="chatStore.clearQueue()" aria-label="Cancel queued messages">
|
||||
Cancel {{ chatStore.queuedMessages.length }} queued
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-if="chatStore.currentConversation && !chatStore.currentConversation.messages.length && !chatStore.streaming"
|
||||
class="empty-chat-prompt"
|
||||
>
|
||||
<p class="empty-hint">What would you like to work on?</p>
|
||||
<div class="quick-chips">
|
||||
<button class="quick-chip" @click="prefill('Summarize the current status of this project')">📊 Project status</button>
|
||||
<button class="quick-chip" @click="prefill('Create a note about ')">📝 New note</button>
|
||||
<button class="quick-chip" @click="prefill('Add tasks for ')">✓ Add tasks</button>
|
||||
</div>
|
||||
<ChatPanel
|
||||
ref="chatPanelRef"
|
||||
variant="full"
|
||||
:projectId="projectId"
|
||||
placeholder="Message the agent… (Enter to send)"
|
||||
class="ws-chat-panel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-input-area">
|
||||
<textarea
|
||||
ref="inputEl"
|
||||
v-model="messageInput"
|
||||
class="chat-input"
|
||||
:placeholder="chatStore.streaming ? 'Type to queue next message… (Enter to queue)' : 'Message the agent… (Enter to send)'"
|
||||
rows="1"
|
||||
@keydown="onInputKeydown"
|
||||
@input="autoResize"
|
||||
></textarea>
|
||||
<button
|
||||
v-if="chatStore.streaming"
|
||||
class="btn-abort"
|
||||
title="Stop generation"
|
||||
@click="chatStore.cancelGeneration()"
|
||||
>
|
||||
■ Stop
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="btn-send"
|
||||
:disabled="!messageInput.trim()"
|
||||
@click="sendMessage"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<!-- Right: Note Editor -->
|
||||
@@ -395,6 +240,7 @@ onUnmounted(async () => {
|
||||
<div v-if="panelOpen.notes" class="panel-inner">
|
||||
<WorkspaceNoteEditor
|
||||
v-if="project"
|
||||
ref="noteEditorRef"
|
||||
:project-id="project.id"
|
||||
:active-note-id="activeNoteId"
|
||||
/>
|
||||
@@ -499,25 +345,31 @@ onUnmounted(async () => {
|
||||
}
|
||||
|
||||
/* Chat panel */
|
||||
.ws-chat-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.ws-panel-chat {
|
||||
border-left: 1px solid var(--color-border);
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.panel-inner-chat {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ws-chat-panel {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.empty-chat-prompt {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.empty-hint {
|
||||
margin: 0 0 1rem;
|
||||
@@ -529,6 +381,7 @@ onUnmounted(async () => {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.quick-chip {
|
||||
background: var(--color-surface);
|
||||
@@ -546,206 +399,4 @@ onUnmounted(async () => {
|
||||
color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
|
||||
}
|
||||
|
||||
.chat-input-area {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
flex: 1;
|
||||
resize: none;
|
||||
background: var(--color-input-bg, var(--color-bg));
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
padding: 0.4rem 0.6rem;
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
color: var(--color-text);
|
||||
line-height: 1.5;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.chat-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-send {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 0.4rem 0.9rem;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.btn-send:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.btn-abort {
|
||||
background: none;
|
||||
color: var(--color-danger, #e74c3c);
|
||||
border: 1px solid var(--color-danger, #e74c3c);
|
||||
border-radius: 6px;
|
||||
padding: 0.4rem 0.9rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
align-self: flex-end;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-abort:hover {
|
||||
background: var(--color-danger, #e74c3c);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Streaming indicators (mirror ChatView) */
|
||||
.chat-message {
|
||||
display: flex;
|
||||
}
|
||||
.role-assistant {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.message-bubble {
|
||||
max-width: 85%;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 10px;
|
||||
padding: 0.65rem 0.85rem;
|
||||
}
|
||||
.message-header {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.role-label {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.streaming-tool-calls {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.streaming-status-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.streaming-status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
.typing-indicator {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
.message-content :deep(p) { margin: 0 0 0.5em; }
|
||||
.message-content :deep(p:last-child) { margin-bottom: 0; }
|
||||
|
||||
.thinking-block {
|
||||
margin-bottom: 0.5rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
.thinking-summary {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
.thinking-summary::-webkit-details-marker { display: none; }
|
||||
.thinking-summary::before {
|
||||
content: "▶";
|
||||
font-size: 0.6rem;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
details[open] .thinking-summary::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.thinking-text {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
color: var(--color-text-secondary);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.ws-message.role-user {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.queued-bubble {
|
||||
max-width: 80%;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 18px;
|
||||
border-bottom-right-radius: 4px;
|
||||
background: linear-gradient(135deg, #6366f1, #4f46e5);
|
||||
color: #fff;
|
||||
opacity: 0.45;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.55;
|
||||
word-break: break-word;
|
||||
}
|
||||
.queued-badge {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.queued-clear-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
.queued-clear-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm, 6px);
|
||||
cursor: pointer;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.78rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
.queued-clear-btn:hover {
|
||||
color: var(--color-danger, #e74c3c);
|
||||
border-color: var(--color-danger, #e74c3c);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -19,6 +19,8 @@ dependencies = [
|
||||
"caldav>=1.3",
|
||||
"icalendar>=5.0",
|
||||
"feedparser>=6.0",
|
||||
"html2text>=2024.2",
|
||||
"trafilatura>=1.12",
|
||||
"APScheduler>=3.10,<4.0",
|
||||
"pywebpush>=2.0",
|
||||
]
|
||||
@@ -29,6 +31,11 @@ dev = [
|
||||
"pytest-asyncio>=0.23",
|
||||
"ruff>=0.6",
|
||||
]
|
||||
voice = [
|
||||
"faster-whisper>=1.0",
|
||||
"kokoro>=0.9",
|
||||
"soundfile>=0.12",
|
||||
]
|
||||
|
||||
[tool.setuptools.packages.find]
|
||||
where = ["src"]
|
||||
|
||||
Executable
+17
@@ -0,0 +1,17 @@
|
||||
#!/usr/bin/env bash
|
||||
# Bump the patch segment of fable-mcp/pyproject.toml version and stage the file.
|
||||
# Usage: called automatically by the Claude Code pre-commit hook, or manually.
|
||||
set -euo pipefail
|
||||
|
||||
REPO_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
|
||||
FILE="$REPO_ROOT/fable-mcp/pyproject.toml"
|
||||
|
||||
current=$(grep '^version = ' "$FILE" | sed 's/version = "\(.*\)"/\1/')
|
||||
major=$(echo "$current" | cut -d. -f1)
|
||||
minor=$(echo "$current" | cut -d. -f2)
|
||||
patch=$(echo "$current" | cut -d. -f3)
|
||||
new_version="$major.$minor.$((patch + 1))"
|
||||
|
||||
sed -i "s/^version = \"$current\"/version = \"$new_version\"/" "$FILE"
|
||||
git -C "$REPO_ROOT" add "$FILE"
|
||||
echo "fable-mcp: $current → $new_version"
|
||||
Executable
+39
@@ -0,0 +1,39 @@
|
||||
#!/usr/bin/env bash
|
||||
# Claude Code PreToolUse hook for Bash.
|
||||
# Reads the tool input JSON from stdin; if the command is a git commit
|
||||
# and fable-mcp files (other than pyproject.toml) are staged, bumps
|
||||
# the fable-mcp patch version before the commit proceeds.
|
||||
#
|
||||
# Exits 0 always so it never blocks the commit.
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
REPO_ROOT="/home/bvandeusen/Nextcloud/Projects/fabledassistant"
|
||||
|
||||
input=$(cat)
|
||||
command=$(echo "$input" | python3 -c "
|
||||
import sys, json
|
||||
data = json.load(sys.stdin)
|
||||
# Claude Code sends {tool_input: {command: ...}}
|
||||
ti = data.get('tool_input', data)
|
||||
print(ti.get('command', ''))
|
||||
" 2>/dev/null || echo "")
|
||||
|
||||
# Only act on git commit commands
|
||||
if ! echo "$command" | grep -qE "git commit"; then
|
||||
exit 0
|
||||
fi
|
||||
|
||||
cd "$REPO_ROOT"
|
||||
|
||||
# Check if fable-mcp files other than pyproject.toml are staged
|
||||
fable_staged=$(git diff --cached --name-only 2>/dev/null \
|
||||
| grep "^fable-mcp/" \
|
||||
| grep -v "^fable-mcp/pyproject.toml$" \
|
||||
|| true)
|
||||
|
||||
if [ -n "$fable_staged" ]; then
|
||||
bash "$REPO_ROOT/scripts/bump_fable_mcp_version.sh"
|
||||
fi
|
||||
|
||||
exit 0
|
||||
+109
-25
@@ -31,6 +31,9 @@ from fabledassistant.routes.users import users_bp
|
||||
from fabledassistant.routes.api_keys import api_keys_bp
|
||||
from fabledassistant.routes.events import events_bp
|
||||
from fabledassistant.routes.search import search_bp
|
||||
from fabledassistant.routes.voice import voice_bp
|
||||
from fabledassistant.routes.profile import profile_bp
|
||||
from fabledassistant.routes.knowledge import knowledge_bp
|
||||
|
||||
STATIC_DIR = Path(__file__).parent / "static"
|
||||
logger = logging.getLogger(__name__)
|
||||
@@ -62,6 +65,13 @@ def create_app() -> Quart:
|
||||
"Set SECRET_KEY or SECRET_KEY_FILE for production use."
|
||||
)
|
||||
|
||||
if not Config.TRUST_PROXY_HEADERS:
|
||||
logger.warning(
|
||||
"TRUST_PROXY_HEADERS is not set. If this instance is behind a reverse proxy "
|
||||
"(nginx, Caddy, Traefik) set TRUST_PROXY_HEADERS=true so rate limiting uses "
|
||||
"real client IPs rather than the proxy IP."
|
||||
)
|
||||
|
||||
app.register_blueprint(admin_bp)
|
||||
app.register_blueprint(api)
|
||||
app.register_blueprint(auth_bp)
|
||||
@@ -85,6 +95,9 @@ def create_app() -> Quart:
|
||||
app.register_blueprint(api_keys_bp)
|
||||
app.register_blueprint(events_bp)
|
||||
app.register_blueprint(search_bp)
|
||||
app.register_blueprint(voice_bp)
|
||||
app.register_blueprint(profile_bp)
|
||||
app.register_blueprint(knowledge_bp)
|
||||
|
||||
@app.before_request
|
||||
async def before_request():
|
||||
@@ -160,64 +173,112 @@ def create_app() -> Quart:
|
||||
async with httpx.AsyncClient(timeout=300.0) as client:
|
||||
await client.post(
|
||||
f"{Config.OLLAMA_URL}/api/generate",
|
||||
json={"model": model, "prompt": "", "keep_alive": "30m"},
|
||||
json={"model": model, "prompt": "", "keep_alive": "2h"},
|
||||
)
|
||||
logger.info("Warmed model '%s' into VRAM", model)
|
||||
except Exception:
|
||||
logger.warning("Failed to warm model '%s'", model, exc_info=True)
|
||||
|
||||
async def _prime_kv_cache(user_id: int, model: str) -> None:
|
||||
"""Send a minimal chat request to prime Ollama's KV cache with the user's system prompt.
|
||||
|
||||
This ensures the next real user message only needs to process its own tokens
|
||||
rather than the full ~4,650-token system prompt, cutting TTFT from ~25s to <1s.
|
||||
The num_ctx must match what real requests will use so Ollama doesn't reload.
|
||||
"""
|
||||
try:
|
||||
from fabledassistant.services.llm import build_context, pick_num_ctx
|
||||
messages, _ = await build_context(
|
||||
user_id=user_id,
|
||||
history=[],
|
||||
current_note_id=None,
|
||||
user_message=" ",
|
||||
)
|
||||
num_ctx = pick_num_ctx(messages)
|
||||
async with httpx.AsyncClient(timeout=120.0) as client:
|
||||
await client.post(
|
||||
f"{Config.OLLAMA_URL}/api/chat",
|
||||
json={
|
||||
"model": model,
|
||||
"messages": messages,
|
||||
"stream": False,
|
||||
"options": {"num_predict": 1, "num_ctx": num_ctx},
|
||||
"keep_alive": "2h",
|
||||
},
|
||||
)
|
||||
logger.info("Primed KV cache for user %d with model '%s' (num_ctx=%d)", user_id, model, num_ctx)
|
||||
except Exception:
|
||||
logger.warning("Failed to prime KV cache for user %d", user_id, exc_info=True)
|
||||
|
||||
async def _warm_user_models() -> None:
|
||||
"""
|
||||
Warm whichever chat model(s) users have selected in Settings.
|
||||
Pull any user-configured models that are missing from Ollama, then warm
|
||||
them and prime the KV cache with each user's system prompt.
|
||||
|
||||
Only warms models that are already installed in Ollama — never auto-pulls.
|
||||
Handles both default_model (chat) and background_model user overrides.
|
||||
Falls back silently if no user preferences exist or Ollama is unreachable.
|
||||
"""
|
||||
from sqlalchemy import select as sa_select, distinct
|
||||
from sqlalchemy import select as sa_select
|
||||
|
||||
from fabledassistant.models import async_session
|
||||
from fabledassistant.models.setting import Setting
|
||||
|
||||
# 1. Collect all distinct default_model values users have saved.
|
||||
# 1. Collect all user model preferences (both chat and background).
|
||||
try:
|
||||
async with async_session() as session:
|
||||
rows = await session.execute(
|
||||
sa_select(distinct(Setting.value)).where(
|
||||
Setting.key == "default_model",
|
||||
sa_select(Setting.user_id, Setting.key, Setting.value).where(
|
||||
Setting.key.in_(["default_model", "background_model"]),
|
||||
Setting.value.isnot(None),
|
||||
Setting.value != "",
|
||||
)
|
||||
)
|
||||
user_models: set[str] = {r for (r,) in rows}
|
||||
settings_rows: list[tuple[int, str, str]] = list(rows)
|
||||
except Exception:
|
||||
logger.debug("Could not read user model preferences from DB", exc_info=True)
|
||||
return
|
||||
|
||||
if not user_models:
|
||||
if not settings_rows:
|
||||
logger.debug("No user model preferences found; skipping warm-up")
|
||||
return
|
||||
|
||||
# 2. Ask Ollama which models are currently installed.
|
||||
# 2. Build the set of unique models to ensure, and the list of
|
||||
# (user_id, chat_model) pairs for KV-cache priming.
|
||||
all_models: set[str] = set()
|
||||
user_chat_models: list[tuple[int, str]] = []
|
||||
for user_id_val, key, model in settings_rows:
|
||||
all_models.add(model)
|
||||
if key == "default_model":
|
||||
user_chat_models.append((user_id_val, model))
|
||||
|
||||
# 3. Ask Ollama which models are currently installed.
|
||||
try:
|
||||
async with httpx.AsyncClient(timeout=10.0) as client:
|
||||
resp = await client.get(f"{Config.OLLAMA_URL}/api/tags")
|
||||
resp.raise_for_status()
|
||||
installed: set[str] = {m["name"] for m in resp.json().get("models", [])}
|
||||
raw_installed: set[str] = {m["name"] for m in resp.json().get("models", [])}
|
||||
installed: set[str] = raw_installed | {
|
||||
n.removesuffix(":latest") for n in raw_installed if n.endswith(":latest")
|
||||
}
|
||||
except Exception:
|
||||
logger.debug("Could not reach Ollama to check installed models", exc_info=True)
|
||||
return
|
||||
|
||||
# 3. Warm only the intersection (installed AND user-preferred).
|
||||
for model in user_models:
|
||||
base = model.removesuffix(":latest")
|
||||
if model in installed or f"{base}:latest" in installed or base in installed:
|
||||
await _warm_model(model)
|
||||
else:
|
||||
logger.info(
|
||||
"User-preferred model '%s' is not installed; skipping warm-up "
|
||||
"(install it via Settings → Models to enable auto-warm)",
|
||||
model,
|
||||
)
|
||||
# 4. Pull any user-configured models that are missing.
|
||||
for model in all_models:
|
||||
if model not in installed:
|
||||
logger.info("User-configured model '%s' not installed; pulling...", model)
|
||||
await _pull_model(model)
|
||||
installed.add(model)
|
||||
|
||||
# 5. Warm each unique chat model, then prime KV cache per user.
|
||||
warmed: set[str] = set()
|
||||
for user_id_val, model in user_chat_models:
|
||||
if model in installed:
|
||||
if model not in warmed:
|
||||
await _warm_model(model)
|
||||
warmed.add(model)
|
||||
await _prime_kv_cache(user_id_val, model)
|
||||
|
||||
async def _pull_model(model: str, warm: bool = False) -> None:
|
||||
try:
|
||||
@@ -232,10 +293,11 @@ def create_app() -> Quart:
|
||||
if warm:
|
||||
await _warm_model(model)
|
||||
|
||||
# Warm user-preferred chat models that are already installed.
|
||||
# Also ensure the embedding model is pulled (no warm needed).
|
||||
asyncio.create_task(_warm_user_models())
|
||||
# Ensure system-default models are present, then pull/warm user-configured ones.
|
||||
asyncio.create_task(_pull_model(Config.OLLAMA_MODEL, warm=True))
|
||||
asyncio.create_task(_pull_model(Config.EMBEDDING_MODEL, warm=False))
|
||||
asyncio.create_task(_pull_model(Config.OLLAMA_BACKGROUND_MODEL, warm=False))
|
||||
asyncio.create_task(_warm_user_models())
|
||||
|
||||
# After models are pulled, backfill embeddings for existing notes.
|
||||
# Runs in the background so it never blocks the server from accepting requests.
|
||||
@@ -250,6 +312,16 @@ def create_app() -> Quart:
|
||||
await backfill_project_summaries()
|
||||
except Exception:
|
||||
logger.warning("Project summary backfill failed", exc_info=True)
|
||||
try:
|
||||
from fabledassistant.services.embeddings import backfill_rss_item_embeddings
|
||||
await backfill_rss_item_embeddings()
|
||||
except Exception:
|
||||
logger.warning("RSS embedding backfill failed", exc_info=True)
|
||||
try:
|
||||
from fabledassistant.services.embeddings import backfill_rss_article_content
|
||||
await backfill_rss_article_content()
|
||||
except Exception:
|
||||
logger.warning("RSS article content backfill failed", exc_info=True)
|
||||
|
||||
asyncio.create_task(_delayed_backfill())
|
||||
|
||||
@@ -257,10 +329,22 @@ def create_app() -> Quart:
|
||||
from fabledassistant.services.briefing_scheduler import start_briefing_scheduler
|
||||
await start_briefing_scheduler(asyncio.get_running_loop())
|
||||
|
||||
# Start event scheduler (reminders + CalDAV pull sync)
|
||||
from fabledassistant.services.event_scheduler import start_event_scheduler
|
||||
start_event_scheduler(asyncio.get_running_loop())
|
||||
|
||||
# Voice model loading (enabled via Admin → Config in the UI, or VOICE_ENABLED env var)
|
||||
from fabledassistant.services.stt import load_stt_model
|
||||
from fabledassistant.services.tts import load_tts_model
|
||||
asyncio.create_task(load_stt_model())
|
||||
asyncio.create_task(load_tts_model())
|
||||
|
||||
@app.after_serving
|
||||
async def shutdown():
|
||||
from fabledassistant.services.briefing_scheduler import stop_briefing_scheduler
|
||||
stop_briefing_scheduler()
|
||||
from fabledassistant.services.event_scheduler import stop_event_scheduler
|
||||
stop_event_scheduler()
|
||||
|
||||
@app.route("/")
|
||||
async def serve_index():
|
||||
|
||||
@@ -24,9 +24,14 @@ class Config:
|
||||
)
|
||||
OLLAMA_URL: str = os.environ.get("OLLAMA_URL", "http://localhost:11434")
|
||||
OLLAMA_MODEL: str = os.environ.get("OLLAMA_MODEL", "qwen3:latest")
|
||||
# KV cache context window for generation. Higher = more RAM usage but longer inputs/outputs.
|
||||
# 131072 is the practical maximum for most models. Lower this on RAM-constrained hosts.
|
||||
OLLAMA_NUM_CTX: int = int(os.environ.get("OLLAMA_NUM_CTX", "65536"))
|
||||
# Lightweight model for background tasks (title generation, tag suggestions,
|
||||
# project summaries, RSS classification). Using a separate model keeps the
|
||||
# main model's KV cache intact between user messages, enabling prefix cache hits.
|
||||
OLLAMA_BACKGROUND_MODEL: str = os.environ.get("OLLAMA_BACKGROUND_MODEL", "qwen2.5:3b")
|
||||
# KV cache context window for generation. Keep this as small as practical —
|
||||
# a larger context forces more KV cache into CPU RAM, drastically slowing prefill.
|
||||
# 16384 covers ~30+ message conversations with our system prompt comfortably.
|
||||
OLLAMA_NUM_CTX: int = int(os.environ.get("OLLAMA_NUM_CTX", "16384"))
|
||||
SECRET_KEY: str = _read_secret("SECRET_KEY", "SECRET_KEY_FILE", "dev-secret-change-me")
|
||||
SECURE_COOKIES: bool = os.environ.get("SECURE_COOKIES", "").lower() in ("1", "true", "yes")
|
||||
LOG_LEVEL: str = os.environ.get("LOG_LEVEL", "INFO")
|
||||
@@ -66,6 +71,12 @@ class Config:
|
||||
VAPID_PUBLIC_KEY: str = os.environ.get("VAPID_PUBLIC_KEY", "")
|
||||
VAPID_CLAIMS_SUB: str = os.environ.get("VAPID_CLAIMS_SUB", "mailto:admin@fabledassistant.local")
|
||||
|
||||
# Voice (Speech-to-Speech) feature
|
||||
VOICE_ENABLED: bool = os.environ.get("VOICE_ENABLED", "").lower() in ("1", "true", "yes")
|
||||
STT_BACKEND: str = os.environ.get("STT_BACKEND", "faster-whisper")
|
||||
STT_MODEL: str = os.environ.get("STT_MODEL", "base.en")
|
||||
TTS_BACKEND: str = os.environ.get("TTS_BACKEND", "kokoro")
|
||||
|
||||
@classmethod
|
||||
def oidc_enabled(cls) -> bool:
|
||||
return bool(cls.OIDC_ISSUER and cls.OIDC_CLIENT_ID and cls.OIDC_CLIENT_SECRET)
|
||||
@@ -88,5 +99,16 @@ class Config:
|
||||
errors.append(f"SMTP_PORT={cls.SMTP_PORT} must be between 1 and 65535")
|
||||
if cls.oidc_enabled() and not cls.BASE_URL.startswith(("http://", "https://")):
|
||||
errors.append(f"BASE_URL='{cls.BASE_URL}' must start with http:// or https:// when OIDC is enabled")
|
||||
if cls.SECRET_KEY == "dev-secret-change-me" and cls.SECURE_COOKIES:
|
||||
errors.append(
|
||||
"SECRET_KEY is set to the insecure default but SECURE_COOKIES=true indicates "
|
||||
"a production deployment. Set SECRET_KEY or SECRET_KEY_FILE before starting."
|
||||
)
|
||||
_valid_stt_models = {"tiny.en", "base.en", "small.en", "medium.en"}
|
||||
if cls.VOICE_ENABLED and cls.STT_MODEL not in _valid_stt_models:
|
||||
errors.append(
|
||||
f"STT_MODEL='{cls.STT_MODEL}' is not supported. "
|
||||
f"Valid values: {', '.join(sorted(_valid_stt_models))}"
|
||||
)
|
||||
if errors:
|
||||
raise ValueError("Configuration errors:\n" + "\n".join(f" - {e}" for e in errors))
|
||||
|
||||
@@ -41,3 +41,5 @@ from fabledassistant.models.notification import Notification # noqa: E402, F401
|
||||
from fabledassistant.models.rss_feed import RssFeed, RssItem # noqa: E402, F401
|
||||
from fabledassistant.models.weather_cache import WeatherCache # noqa: E402, F401
|
||||
from fabledassistant.models.api_key import ApiKey # noqa: E402, F401
|
||||
from fabledassistant.models.user_profile import UserProfile # noqa: E402, F401
|
||||
from fabledassistant.models.rss_item_embedding import RssItemEmbedding # noqa: E402, F401
|
||||
|
||||
@@ -27,6 +27,8 @@ class Event(Base):
|
||||
caldav_uid: Mapped[str] = mapped_column(Text, default="")
|
||||
color: Mapped[str] = mapped_column(Text, default="")
|
||||
recurrence: Mapped[str | None] = mapped_column(Text, nullable=True)
|
||||
reminder_minutes: Mapped[int | None] = mapped_column(Integer, nullable=True)
|
||||
reminder_sent_at: Mapped[datetime | None] = mapped_column(DateTime(timezone=True), nullable=True)
|
||||
created_at: Mapped[datetime] = mapped_column(
|
||||
DateTime(timezone=True), default=lambda: datetime.now(timezone.utc)
|
||||
)
|
||||
@@ -51,6 +53,7 @@ class Event(Base):
|
||||
"location": self.location,
|
||||
"color": self.color,
|
||||
"recurrence": self.recurrence,
|
||||
"reminder_minutes": self.reminder_minutes,
|
||||
"created_at": self.created_at.isoformat() if self.created_at else None,
|
||||
"updated_at": self.updated_at.isoformat() if self.updated_at else None,
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import enum
|
||||
from datetime import date
|
||||
from datetime import date, datetime
|
||||
|
||||
from sqlalchemy import Date, ForeignKey, Index, Integer, Text
|
||||
from sqlalchemy.dialects.postgresql import ARRAY
|
||||
from sqlalchemy import Date, DateTime, ForeignKey, Index, Integer, Text
|
||||
from sqlalchemy.dialects.postgresql import ARRAY, JSONB
|
||||
from sqlalchemy.orm import Mapped, mapped_column
|
||||
|
||||
from fabledassistant.models import Base
|
||||
@@ -45,6 +45,17 @@ class Note(Base, TimestampMixin):
|
||||
status: Mapped[str | None] = mapped_column(Text, nullable=True)
|
||||
priority: Mapped[str | None] = mapped_column(Text, nullable=True)
|
||||
due_date: Mapped[date | None] = mapped_column(Date, nullable=True)
|
||||
started_at: Mapped[datetime | None] = mapped_column(DateTime(timezone=True), nullable=True)
|
||||
completed_at: Mapped[datetime | None] = mapped_column(DateTime(timezone=True), nullable=True)
|
||||
recurrence_rule: Mapped[dict | None] = mapped_column(JSONB, nullable=True)
|
||||
recurrence_next_spawn_at: Mapped[datetime | None] = mapped_column(
|
||||
DateTime(timezone=True), nullable=True
|
||||
)
|
||||
# Entity type — 'note' (default), 'person', 'place', 'list'
|
||||
note_type: Mapped[str] = mapped_column(Text, default="note", server_default="note")
|
||||
# Structured metadata for entity types (person/place/list)
|
||||
# Named 'entity_meta' to avoid collision with SQLAlchemy's reserved 'metadata' attribute
|
||||
entity_meta: Mapped[dict | None] = mapped_column("metadata", JSONB, nullable=True)
|
||||
|
||||
__table_args__ = (
|
||||
Index("ix_notes_tags", "tags", postgresql_using="gin"),
|
||||
@@ -53,12 +64,18 @@ class Note(Base, TimestampMixin):
|
||||
Index("ix_notes_user_id", "user_id"),
|
||||
Index("ix_notes_project_id", "project_id"),
|
||||
Index("ix_notes_milestone_id", "milestone_id"),
|
||||
Index("ix_notes_note_type", "note_type"),
|
||||
)
|
||||
|
||||
@property
|
||||
def is_task(self) -> bool:
|
||||
return self.status is not None
|
||||
|
||||
@property
|
||||
def entity_type(self) -> str:
|
||||
"""Normalised type: 'note', 'person', 'place', or 'list'."""
|
||||
return self.note_type or "note"
|
||||
|
||||
def to_dict(self) -> dict:
|
||||
return {
|
||||
"id": self.id,
|
||||
@@ -71,7 +88,17 @@ class Note(Base, TimestampMixin):
|
||||
"status": self.status,
|
||||
"priority": self.priority,
|
||||
"due_date": self.due_date.isoformat() if self.due_date else None,
|
||||
"started_at": self.started_at.isoformat() if self.started_at else None,
|
||||
"completed_at": self.completed_at.isoformat() if self.completed_at else None,
|
||||
"recurrence_rule": self.recurrence_rule,
|
||||
"recurrence_next_spawn_at": (
|
||||
self.recurrence_next_spawn_at.isoformat()
|
||||
if self.recurrence_next_spawn_at
|
||||
else None
|
||||
),
|
||||
"is_task": self.is_task,
|
||||
"note_type": self.entity_type,
|
||||
"metadata": self.entity_meta or {},
|
||||
"created_at": self.created_at.isoformat(),
|
||||
"updated_at": self.updated_at.isoformat(),
|
||||
}
|
||||
|
||||
@@ -29,11 +29,13 @@ class Project(Base, TimestampMixin):
|
||||
def to_dict(self) -> dict:
|
||||
return {
|
||||
"id": self.id,
|
||||
"user_id": self.user_id,
|
||||
"title": self.title,
|
||||
"description": self.description,
|
||||
"goal": self.goal,
|
||||
"status": self.status,
|
||||
"color": self.color,
|
||||
"auto_summary": self.auto_summary,
|
||||
"created_at": self.created_at.isoformat(),
|
||||
"updated_at": self.updated_at.isoformat(),
|
||||
}
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
from datetime import datetime, timezone
|
||||
|
||||
from sqlalchemy import DateTime, ForeignKey, Integer
|
||||
from sqlalchemy.dialects.postgresql import JSONB
|
||||
from sqlalchemy.orm import Mapped, mapped_column
|
||||
|
||||
from fabledassistant.models import Base
|
||||
|
||||
|
||||
class RssItemEmbedding(Base):
|
||||
"""Stores the embedding vector for an RSS item, used for semantic news search."""
|
||||
|
||||
__tablename__ = "rss_item_embeddings"
|
||||
|
||||
rss_item_id: Mapped[int] = mapped_column(
|
||||
Integer,
|
||||
ForeignKey("rss_items.id", ondelete="CASCADE"),
|
||||
primary_key=True,
|
||||
)
|
||||
user_id: Mapped[int] = mapped_column(Integer, nullable=False, index=True)
|
||||
embedding: Mapped[list] = mapped_column(JSONB, nullable=False)
|
||||
updated_at: Mapped[datetime] = mapped_column(
|
||||
DateTime(timezone=True),
|
||||
default=lambda: datetime.now(timezone.utc),
|
||||
)
|
||||
@@ -0,0 +1,55 @@
|
||||
from datetime import datetime
|
||||
|
||||
from sqlalchemy import DateTime, ForeignKey, Integer, Text
|
||||
from sqlalchemy.dialects.postgresql import ARRAY, JSONB
|
||||
from sqlalchemy.orm import Mapped, mapped_column
|
||||
|
||||
from fabledassistant.models import Base
|
||||
from fabledassistant.models.base import TimestampMixin
|
||||
|
||||
|
||||
class UserProfile(Base, TimestampMixin):
|
||||
__tablename__ = "user_profiles"
|
||||
|
||||
id: Mapped[int] = mapped_column(primary_key=True)
|
||||
user_id: Mapped[int] = mapped_column(
|
||||
Integer, ForeignKey("users.id", ondelete="CASCADE"), nullable=False, unique=True
|
||||
)
|
||||
display_name: Mapped[str | None] = mapped_column(Text, nullable=True)
|
||||
job_title: Mapped[str | None] = mapped_column(Text, nullable=True)
|
||||
industry: Mapped[str | None] = mapped_column(Text, nullable=True)
|
||||
# novice / intermediate / expert — calibrates explanation depth
|
||||
expertise_level: Mapped[str | None] = mapped_column(Text, nullable=True)
|
||||
# concise / balanced / detailed
|
||||
response_style: Mapped[str | None] = mapped_column(Text, nullable=True)
|
||||
# casual / professional / technical
|
||||
tone: Mapped[str | None] = mapped_column(Text, nullable=True)
|
||||
interests: Mapped[list[str] | None] = mapped_column(ARRAY(Text), nullable=True)
|
||||
# {days: ["Mon","Tue",...], start: "09:00", end: "17:00"}
|
||||
work_schedule: Mapped[dict | None] = mapped_column(JSONB, nullable=True)
|
||||
# LLM-consolidated summary of learned preferences
|
||||
learned_summary: Mapped[str | None] = mapped_column(Text, nullable=True)
|
||||
# [{date: "YYYY-MM-DD", bullets: "..."}, ...]
|
||||
observations_raw: Mapped[list | None] = mapped_column(JSONB, nullable=True)
|
||||
observations_updated_at: Mapped[datetime | None] = mapped_column(
|
||||
DateTime(timezone=True), nullable=True
|
||||
)
|
||||
|
||||
def to_dict(self) -> dict:
|
||||
return {
|
||||
"display_name": self.display_name or "",
|
||||
"job_title": self.job_title or "",
|
||||
"industry": self.industry or "",
|
||||
"expertise_level": self.expertise_level or "intermediate",
|
||||
"response_style": self.response_style or "balanced",
|
||||
"tone": self.tone or "casual",
|
||||
"interests": self.interests or [],
|
||||
"work_schedule": self.work_schedule or {},
|
||||
"learned_summary": self.learned_summary or "",
|
||||
"observations_count": len(self.observations_raw or []),
|
||||
"observations_updated_at": (
|
||||
self.observations_updated_at.isoformat()
|
||||
if self.observations_updated_at
|
||||
else None
|
||||
),
|
||||
}
|
||||
@@ -1,3 +1,12 @@
|
||||
"""In-process sliding-window rate limiter.
|
||||
|
||||
IMPORTANT — deployment note:
|
||||
Rate limit counters are stored in memory and are lost on process restart.
|
||||
When deployed behind a reverse proxy (nginx, Caddy, Traefik) you MUST set
|
||||
TRUST_PROXY_HEADERS=true so that the real client IP is used as the bucket key
|
||||
rather than the proxy's IP (which would cause all users to share one bucket).
|
||||
"""
|
||||
|
||||
import asyncio
|
||||
import time
|
||||
from collections import defaultdict
|
||||
|
||||
@@ -19,6 +19,7 @@ from fabledassistant.services.backup import (
|
||||
restore_full_backup,
|
||||
)
|
||||
from fabledassistant.services.email import SMTP_SETTING_KEYS, get_base_url, get_smtp_config, is_smtp_configured, send_test_email
|
||||
from fabledassistant.services.voice_config import get_voice_config
|
||||
from fabledassistant.services.logging import get_logs, get_log_stats, log_audit
|
||||
from fabledassistant.services.notifications import send_invitation_email
|
||||
from fabledassistant.services.settings import set_setting, set_settings_batch
|
||||
@@ -194,12 +195,54 @@ async def get_base_url_setting():
|
||||
async def update_base_url():
|
||||
data = await request.get_json()
|
||||
url = (data.get("base_url") or "").strip().rstrip("/")
|
||||
if url:
|
||||
scheme = url.split("://")[0].lower() if "://" in url else ""
|
||||
if scheme not in ("http", "https"):
|
||||
return jsonify({"error": "Base URL must use http or https"}), 400
|
||||
uid = get_current_user_id()
|
||||
await set_setting(uid, "base_url", url)
|
||||
await log_audit("base_url_config", user_id=uid, username=g.user.username, ip_address=request.remote_addr, details={"base_url": url})
|
||||
return jsonify({"status": "ok"})
|
||||
|
||||
|
||||
@admin_bp.route("/voice", methods=["GET"])
|
||||
@admin_required
|
||||
async def get_voice_config_route():
|
||||
config = await get_voice_config()
|
||||
return jsonify(config)
|
||||
|
||||
|
||||
@admin_bp.route("/voice", methods=["PUT"])
|
||||
@admin_required
|
||||
async def update_voice_config():
|
||||
data = await request.get_json()
|
||||
uid = get_current_user_id()
|
||||
valid_models = {"tiny.en", "base.en", "small.en", "medium.en"}
|
||||
settings: dict[str, str] = {}
|
||||
if "voice_enabled" in data:
|
||||
settings["voice_enabled"] = "true" if data["voice_enabled"] else "false"
|
||||
if "voice_stt_model" in data:
|
||||
model = str(data["voice_stt_model"])
|
||||
if model not in valid_models:
|
||||
return jsonify({"error": f"Invalid STT model. Choose from: {', '.join(sorted(valid_models))}"}), 400
|
||||
settings["voice_stt_model"] = model
|
||||
if settings:
|
||||
await set_settings_batch(uid, settings)
|
||||
await log_audit("voice_config", user_id=uid, username=g.user.username, ip_address=request.remote_addr, details=settings)
|
||||
return jsonify({"status": "ok"})
|
||||
|
||||
|
||||
@admin_bp.route("/voice/reload", methods=["POST"])
|
||||
@admin_required
|
||||
async def reload_voice_models():
|
||||
"""Reload STT and TTS models in the background without a server restart."""
|
||||
from fabledassistant.services.stt import reload_stt_model
|
||||
from fabledassistant.services.tts import reload_tts_model
|
||||
asyncio.create_task(reload_stt_model())
|
||||
asyncio.create_task(reload_tts_model())
|
||||
return jsonify({"status": "loading"})
|
||||
|
||||
|
||||
@admin_bp.route("/invitations", methods=["POST"])
|
||||
@admin_required
|
||||
async def create_invite():
|
||||
|
||||
@@ -359,7 +359,10 @@ async def oauth_callback():
|
||||
return redirect("/login?error=oauth")
|
||||
|
||||
sub = claims.get("sub", "")
|
||||
email = claims.get("email", "")
|
||||
# Only trust the email claim for account linking if the provider has verified it.
|
||||
# An unverified email could be used to hijack an existing local account.
|
||||
email_verified = claims.get("email_verified", False)
|
||||
email = claims.get("email", "") if email_verified else ""
|
||||
preferred_username = claims.get("preferred_username", "")
|
||||
|
||||
if not sub:
|
||||
|
||||
@@ -10,7 +10,7 @@ from sqlalchemy import select
|
||||
from fabledassistant.auth import login_required
|
||||
from fabledassistant.models import async_session
|
||||
from fabledassistant.models.conversation import Conversation, Message
|
||||
from fabledassistant.models.rss_feed import RssFeed
|
||||
from fabledassistant.models.rss_feed import RssFeed, RssItem
|
||||
from fabledassistant.services import rss as rss_svc
|
||||
from fabledassistant.services import weather as weather_svc
|
||||
from fabledassistant.services.briefing_conversations import (
|
||||
@@ -18,6 +18,9 @@ from fabledassistant.services.briefing_conversations import (
|
||||
list_briefing_conversations,
|
||||
post_message,
|
||||
)
|
||||
from fabledassistant.services.chat import add_message, get_conversation
|
||||
from fabledassistant.services.generation_buffer import create_buffer, get_buffer
|
||||
from fabledassistant.services.generation_task import run_generation
|
||||
from fabledassistant.services.settings import get_setting, set_settings_batch
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
@@ -71,6 +74,12 @@ async def add_feed():
|
||||
url = (data.get("url") or "").strip()
|
||||
if not url:
|
||||
return jsonify({"error": "url required"}), 400
|
||||
scheme = url.split("://")[0].lower() if "://" in url else ""
|
||||
if scheme not in ("http", "https"):
|
||||
return jsonify({"error": "Feed URL must use http or https"}), 400
|
||||
from fabledassistant.services.llm import _is_private_url
|
||||
if _is_private_url(url):
|
||||
return jsonify({"error": "Feed URL must not point to an internal address"}), 400
|
||||
category = data.get("category") or None
|
||||
|
||||
async with async_session() as session:
|
||||
@@ -129,8 +138,21 @@ async def recent_items():
|
||||
@briefing_bp.route("/weather", methods=["GET"])
|
||||
@_REQUIRE
|
||||
async def get_weather():
|
||||
data = await weather_svc.get_cached_weather(g.user.id)
|
||||
return jsonify({"locations": data})
|
||||
rows = await weather_svc.get_cached_weather_rows(g.user.id)
|
||||
import json as _json
|
||||
raw = await get_setting(g.user.id, "briefing_config", "{}")
|
||||
try:
|
||||
_cfg = _json.loads(raw) if isinstance(raw, str) else (raw or {})
|
||||
temp_unit = _cfg.get("temp_unit", "C")
|
||||
if temp_unit not in ("C", "F"):
|
||||
temp_unit = "C"
|
||||
except Exception:
|
||||
temp_unit = "C"
|
||||
cards = [
|
||||
card for row in rows
|
||||
if (card := weather_svc.parse_weather_card_data(row, temp_unit)) is not None
|
||||
]
|
||||
return jsonify({"locations": cards, "temp_unit": temp_unit})
|
||||
|
||||
|
||||
@briefing_bp.route("/weather/geocode", methods=["POST"])
|
||||
@@ -223,12 +245,30 @@ async def get_conversation_messages(conv_id: int):
|
||||
@briefing_bp.route("/trigger", methods=["POST"])
|
||||
@_REQUIRE
|
||||
async def manual_trigger():
|
||||
"""Dev/admin endpoint to manually trigger a briefing compilation."""
|
||||
"""Manually trigger a briefing compilation, including a fresh data refresh."""
|
||||
data = await request.get_json() or {}
|
||||
slot = data.get("slot", "compilation")
|
||||
if slot not in ("compilation", "morning", "midday", "afternoon"):
|
||||
return jsonify({"error": "invalid slot"}), 400
|
||||
|
||||
# Refresh external data first (mirrors what the scheduler does)
|
||||
try:
|
||||
from fabledassistant.services.rss import refresh_all_feeds
|
||||
config_raw = await get_setting(g.user.id, "briefing_config", "{}")
|
||||
config = json.loads(config_raw) if isinstance(config_raw, str) else {}
|
||||
await refresh_all_feeds(g.user.id)
|
||||
for key, loc in config.get("locations", {}).items():
|
||||
if loc.get("lat") and loc.get("lon"):
|
||||
await weather_svc.refresh_location_cache(
|
||||
user_id=g.user.id,
|
||||
location_key=key,
|
||||
location_label=loc.get("label", key),
|
||||
lat=loc["lat"],
|
||||
lon=loc["lon"],
|
||||
)
|
||||
except Exception:
|
||||
logger.warning("Pre-trigger refresh failed for user %d", g.user.id, exc_info=True)
|
||||
|
||||
from fabledassistant.services.briefing_pipeline import run_compilation
|
||||
|
||||
model = await get_setting(g.user.id, "default_model", "")
|
||||
@@ -322,3 +362,147 @@ async def delete_rss_reaction(item_id: int):
|
||||
await session.commit()
|
||||
|
||||
return jsonify({"ok": True})
|
||||
|
||||
|
||||
@briefing_bp.route("/news", methods=["GET"])
|
||||
@_REQUIRE
|
||||
async def list_news():
|
||||
"""Return recent RSS articles with optional feed filter and pagination.
|
||||
|
||||
Query params:
|
||||
days — lookback window (default 2, max 90)
|
||||
limit — items per page (default 40, max 100)
|
||||
offset — pagination offset (default 0)
|
||||
feed_id — optional integer filter by feed
|
||||
"""
|
||||
from sqlalchemy import text as _text
|
||||
|
||||
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)
|
||||
|
||||
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 (CAST(:feed_id AS integer) IS NULL OR f.id = CAST(:feed_id AS integer))
|
||||
AND COALESCE(i.published_at, i.fetched_at) >= NOW() - make_interval(days => :days)
|
||||
ORDER BY COALESCE(i.published_at, i.fetched_at) DESC
|
||||
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],
|
||||
"content": r["content"] or "",
|
||||
"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})
|
||||
|
||||
|
||||
# ── Article Discuss ────────────────────────────────────────────────────────────
|
||||
|
||||
@briefing_bp.route("/articles/<int:item_id>/discuss", methods=["POST"])
|
||||
@_REQUIRE
|
||||
async def discuss_article(item_id: int):
|
||||
"""Inject article content as a synthetic tool exchange and trigger generation."""
|
||||
data = await request.get_json() or {}
|
||||
conv_id = data.get("conv_id")
|
||||
if not conv_id:
|
||||
return jsonify({"error": "conv_id required"}), 400
|
||||
|
||||
uid = g.user.id
|
||||
|
||||
# Verify item belongs to user via feed ownership
|
||||
async with async_session() as session:
|
||||
result = await session.execute(
|
||||
select(RssItem)
|
||||
.join(RssFeed, RssFeed.id == RssItem.feed_id)
|
||||
.where(RssItem.id == item_id, RssFeed.user_id == uid)
|
||||
)
|
||||
item = result.scalars().first()
|
||||
if item is None:
|
||||
return jsonify({"error": "Not found"}), 404
|
||||
|
||||
# Verify conversation belongs to user
|
||||
conv = await get_conversation(uid, conv_id)
|
||||
if conv is None:
|
||||
return jsonify({"error": "Conversation not found"}), 404
|
||||
|
||||
# Reject if generation already running
|
||||
if get_buffer(conv_id) is not None:
|
||||
return jsonify({"error": "Generation already in progress"}), 409
|
||||
|
||||
from fabledassistant.services.rss import _fetch_full_article
|
||||
article_content = await _fetch_full_article(item.url) or item.content or ""
|
||||
|
||||
# Store synthetic assistant message with read_article tool result
|
||||
synthetic_tool_calls = [{
|
||||
"function": "read_article",
|
||||
"arguments": {"url": item.url},
|
||||
"result": {
|
||||
"success": True,
|
||||
"type": "article_content",
|
||||
"url": item.url,
|
||||
"content": article_content,
|
||||
"truncated": False,
|
||||
},
|
||||
}]
|
||||
await add_message(conv_id, "assistant", "", status="complete", tool_calls=synthetic_tool_calls)
|
||||
|
||||
# Store user message
|
||||
await add_message(conv_id, "user", "Please summarize and discuss this article.")
|
||||
|
||||
# Reload conversation with fresh messages to build history
|
||||
conv = await get_conversation(uid, conv_id)
|
||||
assert conv is not None
|
||||
|
||||
history = []
|
||||
for msg in conv.messages:
|
||||
if msg.role == "system":
|
||||
continue
|
||||
msg_dict = {"role": msg.role, "content": msg.content or ""}
|
||||
if msg.tool_calls:
|
||||
msg_dict["tool_calls"] = [
|
||||
{"function": {"name": tc["function"], "arguments": tc["arguments"]}}
|
||||
for tc in msg.tool_calls
|
||||
]
|
||||
history.append(msg_dict)
|
||||
for tc in msg.tool_calls:
|
||||
history.append({"role": "tool", "content": json.dumps(tc.get("result", {}))})
|
||||
else:
|
||||
history.append(msg_dict)
|
||||
|
||||
model = await get_setting(uid, "default_model", "") or ""
|
||||
|
||||
assistant_msg = await add_message(conv_id, "assistant", "", status="generating")
|
||||
buf = create_buffer(conv_id, assistant_msg.id)
|
||||
|
||||
asyncio.create_task(run_generation(
|
||||
buf, history, model,
|
||||
uid, conv_id, conv.title or "",
|
||||
"Please summarize and discuss this article.",
|
||||
think=True,
|
||||
))
|
||||
|
||||
return jsonify({"assistant_message_id": assistant_msg.id, "status": "generating"}), 202
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user