Add settings screen with sqlite-backed configuration (#41)

* Add settings screen with SQLite-backed configuration

* Embed settings as tab

* fix: use updated conventions

* fix: fix tab location and integrate settings

* refactor: improve tab integration

* fix: match widths

* refactor: relocate settings db

* fix: Remove stale info

* fix: use same form dimensions

* feat: achieve perfect tab alignment

* fix: settings/save

* fix: stop form resetting

* fix: remove open AI key warning

* refactor: simplify settings saving

* fix: the issue with the form values being cleared on submissio

* refactor: code/ui cleanup

* ui: remove tab / form space caused by border-radius

* ui: simplify styling

* ui: fix input field lengths

* ui: adjust api key and model input lengths

* ui: adjust numeric field lengths

* ui: update styles

* feat: add urls to descriptions

* refactor: code cleanup

* feat: add visual save settings feedback

* fix: remove unused code

* refactor: enhance/streamline settings form

* refactor: make hr styles global

* refactor: simplify settings form

* refactor: remove unused functions

* feat: add knip, fix dependencies

* ui: move khoj settings up

---------

Co-authored-by: nbp <splinesreticulating@users.noreply.github.com>

Author: splinesreticulating

.env.example

@@ -1,31 +1,3 @@
-# Partner
-PARTNER_PHONE=your-partner-phone (eg. +1234567890)
-
-# Search this many hours of prior messages for extra context
-HISTORY_LOOKBACK_HOURS=6
-
-# OpenAI (leave values blank if not using)
-OPENAI_API_KEY=your-openai-api-key
-OPENAI_MODEL=gpt-4
-OPENAI_TEMPERATURE=0.5 # Between 0.0 (robotic or repetitive) and 1.0 (random or flippant)
-OPENAI_TOP_P=0.8 # Between 0.0 (most likely) and 1.0 (most diverse)
-OPENAI_FREQUENCY_PENALTY=0.2 # Between 0.0 (no penalty) and 1.0 (strong penalty)
-OPENAI_PRESENCE_PENALTY=0.2 # Between 0.0 (no penalty) and 1.0 (strong penalty)
-
-# Anthropic (leave values blank if not using)
-ANTHROPIC_API_KEY=your-anthropic-api-key
-ANTHROPIC_MODEL=claude-3-opus-20240229
-ANTHROPIC_TEMPERATURE=0.5
-
-# Grok (leave values blank if not using)
-GROK_API_KEY=your-grok-api-key
-GROK_MODEL=grok-1
-GROK_TEMPERATURE=0.5
-
-# Khoj (leave values blank if not using)
-KHOJ_API_URL=http://127.0.0.1:42110/api/chat
-KHOJ_AGENT=agent-name
-
 # Auth
 APP_USERNAME=you
 APP_PASSWORD=yourpassword
@@ -38,6 +10,3 @@ ALLOWED_HOST=your-allowed-host (eg. yourhost.tailscale.ts.net)
 
 # Auth (generated using OpenSSL: `openssl rand -base64 64`)
 JWT_SECRET=your-jwt-secret
-
-# Custom Context sent with every message to the AI provider
-CUSTOM_CONTEXT='Act as a relationship coach and therapist. You are helping my partner and I improve our relationship.'

.gitignore

@@ -27,3 +27,6 @@ vite.config.ts.timestamp-*
 
 # Coverage
 coverage
+
+# Settings database
+settings.db

README.md

@@ -75,38 +75,6 @@ cp .env.example .env
 
 Update the values in the `.env` file. The following variables are needed:
 
-- **Customization**
-
-    - `PARTNER_PHONE`: Your partner's phone number in the Messages app
-    - `HISTORY_LOOKBACK_HOURS`: How many hours of prior conversation history to search for extra context
-    - `CUSTOM_CONTEXT`: To guide the AI's personality and behavior (Example: "Act as my therapist suggesting replies to my partner" or "You are a helpful assistant")
-
-- **Open AI**
-
-    - `OPENAI_API_KEY`: Your OpenAI API key
-    - `OPENAI_MODEL`: gpt-4 or any other OpenAI model
-    - `OPENAI_TEMPERATURE`: Controls the randomness of the responses
-    - `OPENAI_TOP_P`: Lets the responses be a little more adventurous
-    - `OPENAI_FREQUENCY_PENALTY`: Keeps the suggestions from repeating themselves
-    - `OPENAI_PRESENCE_PENALTY`: Nudges the AI to bring up fresh ideas
-
-- **Anthropic**
-
-    - `ANTHROPIC_API_KEY`: Your Anthropic API key
-    - `ANTHROPIC_MODEL`: claude-3-opus-20240229 or another Anthropic model
-    - `ANTHROPIC_TEMPERATURE`: Controls the randomness of Claude's responses
-
-- **Grok**
-
-    - `GROK_API_KEY`: Your Grok API key
-    - `GROK_MODEL`: grok-1 or another Grok model
-    - `GROK_TEMPERATURE`: Controls the randomness of Grok's responses
-
-- **Khoj**
-
-    - `KHOJ_API_URL`: Your [Khoj](https://khoj.dev/) server API URL if you have one, otherwise leave this out or leave it blank
-    - `KHOJ_AGENT`: The [Khoj agent](https://docs.khoj.dev/features/agents/) to use if you have one, otherwise leave this out or leave it blank
-
 - **Logging**
 
     - `LOG_LEVEL`: Logging level (info, debug, warn, error)

knip.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://unpkg.com/knip@5/schema.json",
+  "entry": [
+    "src/**/*.svelte",
+    "src/**/*.ts",
+    "!**/*.test.ts",
+    "!**/*.spec.ts",
+    "!**/*.d.ts",
+    "!**/__tests__/**",
+    "!**/tests/**",
+    "!**/mocks/**"
+  ],
+  "project": ["src/**/*.ts", "src/**/*.svelte"],
+  "ignore": [
+    "**/{.svelte-kit,node_modules,__tests__,tests,test,mocks,__mocks__}/**",
+    "**/*.{test,spec,d}.{ts,js}",
+    "vite.config.ts",
+    "src/hooks.server.ts",
+    "pino-pretty",
+    "src/lib/types.ts"
+  ],
+  "ignoreDependencies": ["pino-pretty"]
+}

package.json

@@ -18,18 +18,19 @@
         "format:check": "prettier --check .",
         "lint": "eslint .",
         "lint:fix": "eslint --fix .",
+        "prune": "knip --production",
+        "prune:list": "knip",
         "pretest": "svelte-kit sync",
         "test": "vitest run",
         "test:watch": "vitest",
         "test:coverage": "vitest run --coverage"
     },
     "devDependencies": {
+        "@eslint/js": "^9.29.0",
         "@sveltejs/adapter-auto": "^6.0.0",
         "@sveltejs/kit": "^2.16.0",
         "@sveltejs/vite-plugin-svelte": "^5.0.0",
         "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/svelte": "^5.2.8",
-        "@types/basic-auth": "^1.1.8",
         "@types/jsonwebtoken": "^9.0.9",
         "@types/node": "^22.15.21",
         "@typescript-eslint/eslint-plugin": "^8.34.0",
@@ -40,16 +41,17 @@
         "eslint-plugin-svelte": "^3.9.1",
         "globals": "^16.0.0",
         "jsdom": "^26.1.0",
+        "knip": "^5.61.2",
         "prettier": "^3.5.3",
         "prettier-plugin-svelte": "^3.4.0",
         "svelte": "^5.0.0",
         "svelte-check": "^4.0.0",
+        "svelte-eslint-parser": "^1.2.0",
         "typescript": "^5.0.0",
         "vite": "^6.2.6",
         "vitest": "^3.1.4"
     },
     "dependencies": {
-        "basic-auth": "^2.0.1",
         "dotenv": "^16.5.0",
         "jsonwebtoken": "^9.0.2",
         "pino": "^9.7.0",

src/app.css

@@ -54,6 +54,18 @@ label {
     font-family: var(--label-font);
 }
 
+hr {
+    border: 0;
+    height: 1px;
+    background-image: linear-gradient(
+        to right,
+        hsla(var(--primary-hsl, 0, 0%, 20%), 0),
+        hsl(var(--primary-hsl, 0, 0%, 20%)),
+        hsla(var(--primary-hsl, 0, 0%, 20%), 0)
+    );
+    margin: 1rem 0;
+}
+
 @keyframes spin {
     to {
         transform: rotate(360deg);

src/lib/anthropic.ts

@@ -1,4 +1,4 @@
-import { ANTHROPIC_API_KEY, ANTHROPIC_MODEL, ANTHROPIC_TEMPERATURE } from '$env/static/private'
+import { settings } from '$lib/config'
 import { anthropicPrompt } from '$lib/prompts'
 import type { Message, ToneType } from '$lib/types'
 import { extractReplies, parseSummaryToHumanReadable } from '$lib/utils'
@@ -10,9 +10,9 @@ const DEFAULT_MODEL = 'claude-3-opus-20240229'
 const DEFAULT_TEMPERATURE = 0.5
 
 const getConfig = () => ({
-    model: ANTHROPIC_MODEL || DEFAULT_MODEL,
-    temperature: Number(ANTHROPIC_TEMPERATURE || DEFAULT_TEMPERATURE),
-    apiKey: ANTHROPIC_API_KEY,
+    model: settings.ANTHROPIC_MODEL || DEFAULT_MODEL,
+    temperature: Number(settings.ANTHROPIC_TEMPERATURE || DEFAULT_TEMPERATURE),
+    apiKey: settings.ANTHROPIC_API_KEY,
 })
 
 export const getAnthropicReply = async (