From bb650ba563cd4483ebbe958f1eae2303c3e729b4 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Tue, 12 May 2026 14:44:51 -0400
Subject: [PATCH] feat(profile): Settings panel with recent journal
 observations

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/views/SettingsView.vue | 41 ++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index 422eb99..1fd2d78 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -4,7 +4,7 @@ import { ref, computed, watch, onMounted } from "vue";
 import { useSettingsStore } from "@/stores/settings";
 import { useAuthStore } from "@/stores/auth";
 import { useToastStore } from "@/stores/toast";
-import { apiGet, apiPost, apiPut, apiDelete, listGroups, createGroup, deleteGroup, listGroupMembers, addGroupMember, removeGroupMember, searchUsers, getFableMcpInfo, listApiKeys, createApiKey as apiCreateApiKey, revokeApiKey as apiRevokeApiKey, getVoiceStatus, getVoiceList, synthesiseSpeech, getProfile, updateProfile, consolidateProfile, clearProfileObservations, getJournalConfig, saveJournalConfig, geocodeAddress, type ApiKeyEntry, type GroupEntry, type GroupMember, type UserSearchResult, type VoiceStatusResult, type VoiceEntry, type VoiceBlendEntry, type UserProfile, type JournalConfig } from "@/api/client";
+import { apiGet, apiPost, apiPut, apiDelete, listGroups, createGroup, deleteGroup, listGroupMembers, addGroupMember, removeGroupMember, searchUsers, getFableMcpInfo, listApiKeys, createApiKey as apiCreateApiKey, revokeApiKey as apiRevokeApiKey, getVoiceStatus, getVoiceList, synthesiseSpeech, getProfile, updateProfile, consolidateProfile, clearProfileObservations, listProfileObservations, getJournalConfig, saveJournalConfig, geocodeAddress, type ApiKeyEntry, type GroupEntry, type GroupMember, type UserSearchResult, type VoiceStatusResult, type VoiceEntry, type VoiceBlendEntry, type UserProfile, type JournalConfig, type ProfileObservationEntry } from "@/api/client";
 import { usePushStore } from "@/stores/push";
 import type { User } from "@/types/auth";
 import PaginationBar from "@/components/PaginationBar.vue";
@@ -549,6 +549,26 @@ const profileSaving = ref(false)
 const profileSaved = ref(false)
 const consolidating = ref(false)
 const clearingObs = ref(false)
+const observations = ref<ProfileObservationEntry[]>([])
+const observationsExpanded = ref(false)
+const observationsLoading = ref(false)
+const observationsLoaded = ref(false)
+
+async function toggleObservations() {
+  observationsExpanded.value = !observationsExpanded.value
+  if (observationsExpanded.value && !observationsLoaded.value) {
+    observationsLoading.value = true
+    try {
+      const res = await listProfileObservations()
+      observations.value = res.observations
+      observationsLoaded.value = true
+    } catch {
+      toastStore.show('Failed to load observations', 'error')
+    } finally {
+      observationsLoading.value = false
+    }
+  }
+}
 
 async function loadProfile() {
   try { profile.value = await getProfile() } catch { /* non-critical */ }
@@ -702,6 +722,8 @@ async function clearObservations() {
     profile.value.learned_summary = ''
     profile.value.observations_count = 0
     profile.value.observations_updated_at = null
+    observations.value = []
+    observationsLoaded.value = false
     toastStore.show('Learned data cleared')
   } catch { toastStore.show('Failed to clear observations', 'error') }
   finally { clearingObs.value = false }
@@ -1929,6 +1951,23 @@ function formatUserDate(iso: string): string {
 
         <div v-if="profile.learned_summary" class="learned-summary">{{ profile.learned_summary }}</div>
         <div v-else class="learned-empty">No learned summary yet. Observations accumulate from journal and chat conversations.</div>
+
+        <div class="observations-panel" style="margin-top:0.75rem">
+          <button class="btn-secondary" @click="toggleObservations" :disabled="profile.observations_count === 0">
+            {{ observationsExpanded ? '▾' : '▸' }} Recent observations ({{ profile.observations_count }})
+          </button>
+          <div v-if="observationsExpanded" class="observations-list" style="margin-top:0.5rem;padding:0.5rem 0.75rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-elev-1)">
+            <div v-if="observationsLoading">Loading…</div>
+            <div v-else-if="observations.length === 0">No observations yet.</div>
+            <div v-else>
+              <div v-for="entry in observations" :key="entry.date" style="margin-bottom:0.75rem">
+                <div style="font-weight:600;font-size:0.875rem;color:var(--color-text-muted)">{{ entry.date }}</div>
+                <div style="white-space:pre-wrap;font-size:0.9rem">{{ entry.bullets }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div class="actions" style="gap:0.5rem;flex-wrap:wrap">
           <button class="btn-secondary" @click="runConsolidate" :disabled="consolidating || profile.observations_count === 0">
             {{ consolidating ? 'Consolidating…' : 'Consolidate Now' }}