Grayscale/obelisk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(app): add Settings view, configurable claude dir, and recap docs refactor

Browse Source 
Introduce a Settings view for configuring the Claude data directory
  (with WSL auto-detection on Windows), sidebar project grouping module,
  and an empty-state onboarding screen for SessionList. Refactor
  recap-patterns.md into per-card reference files under references/recap/
  with separate retrieval and writing guides. Remove the legacy panel.html.
  On the data layer: incremental indexing via changedPaths, per-session
  live-update IPC (obelisk:session-updated), and session dirty-tracking
  in the renderer.
This commit is contained in:
tommy0103
2026-06-15 01:44:32 +08:00
parent 9fc7f202f0
commit b7506ee765
48 changed files with 1950 additions and 1406 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/renderer/src/App.vue
+35 -32
View File
@@ -14,6 +14,7 @@ import {
toggleIncludeMessageBodies
} from './store.js';
import { formatProjectLabel } from './utils.js';
import { buildSidebarProjects } from './sidebar-projects.mjs';
const router = useRouter();
const route = useRoute();
@@ -30,38 +31,24 @@ const currentRouteType = computed(() => {
if (name === 'SessionList' || name === 'SessionDetail' || name === 'SubagentDetail') return 'sessions';
if (name === 'Activity') return 'activity';
if (name === 'Recap' || name === 'RecapDetail') return 'recap';
if (name === 'Settings') return 'settings';
return 'memory';
});
const sidebarProjects = computed(() => {
const items = currentRouteType.value === 'sessions' ? state.sessions : state.memories;
const filtered = items.filter(item => {
if (currentRouteType.value === 'sessions') return true;
return state.view === 'archived' ? item.archived : !item.archived;
});
let projects = [...new Set(filtered.map(item => item.project).filter(Boolean))];
if (state.projectSearch) {
const q = state.projectSearch.toLowerCase();
projects = projects.filter(p => formatProjectLabel(p).toLowerCase().includes(q));
}
projects.sort((a, b) => formatProjectLabel(a).localeCompare(formatProjectLabel(b)));
// Count per project
const counts = {};
for (const item of filtered) {
if (item.project) counts[item.project] = (counts[item.project] || 0) + 1;
}
return projects.map(p => ({
slug: p,
label: formatProjectLabel(p),
count: counts[p] || 0
}));
const sidebarProjectsForCurrentScope = (search = state.projectSearch) => buildSidebarProjects({
routeType: currentRouteType.value,
sessions: state.sessions,
memories: state.memories,
projects: state.projects,
view: state.view,
search,
formatProjectLabel,
});
const sidebarProjects = computed(() => sidebarProjectsForCurrentScope());
const totalProjectCount = computed(() => {
const items = currentRouteType.value === 'sessions' ? state.sessions : state.memories;
return new Set(items.map(i => i.project).filter(Boolean)).size;
return sidebarProjectsForCurrentScope('').length;
});
// --- Toolbar visibility ---
@@ -86,6 +73,8 @@ const windowTitle = computed(() => {
scopeText = 'Recap';
} else if (route.name === 'RecapDetail') {
scopeText = `Recap · ${route.params.id}`;
} else if (route.name === 'Settings') {
scopeText = 'Settings';
} else if (route.name?.startsWith('Session')) {
if (route.name === 'SessionDetail' || route.name === 'SubagentDetail') {
const s = state.sessions.find(x => x.id === route.params.id);
@@ -220,7 +209,7 @@ provide('recapGenerateOpen', recapGenerateOpen);
<div class="sidebar-section-title"><span>Library</span></div>
<button
class="sidebar-item"
:class="{ active: state.route === 'sessions' && state.projectFilter === 'all' }"
:class="{ active: currentRouteType === 'sessions' && state.projectFilter === 'all' }"
@click="handleSidebarRoute('sessions')"
>
<svg class="icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
@@ -324,6 +313,24 @@ provide('recapGenerateOpen', recapGenerateOpen);
</button>
</div>
</div>
<div class="sidebar-section sidebar-bottom">
<button
class="sidebar-item"
:class="{ active: route.name === 'Settings' }"
@click="router.push('/settings')"
>
<svg class="icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
<line x1="3" y1="4" x2="13" y2="4"/>
<line x1="3" y1="8" x2="13" y2="8"/>
<line x1="3" y1="12" x2="13" y2="12"/>
<circle cx="9.5" cy="4" r="1.7" fill="var(--bg)"/>
<circle cx="5.5" cy="8" r="1.7" fill="var(--bg)"/>
<circle cx="11" cy="12" r="1.7" fill="var(--bg)"/>
</svg>
<span class="label">Settings</span>
</button>
</div>
</aside>
<main class="main">
@@ -374,6 +381,7 @@ provide('recapGenerateOpen', recapGenerateOpen);
</template>
<span v-if="route.name === 'Activity'" class="crumb terminal">Activity</span>
<span v-if="route.name === 'Recap'" class="crumb terminal">Recap</span>
<span v-if="route.name === 'Settings'" class="crumb terminal">Settings</span>
<router-link v-if="route.name === 'RecapDetail'" class="crumb" to="/recap">Recap</router-link>
<template v-if="route.name === 'RecapDetail'">
<span class="crumb-sep">/</span>
@@ -433,10 +441,5 @@ provide('recapGenerateOpen', recapGenerateOpen);
</router-view>
</main>
</div>
<div class="statusbar">
<div class="status-left" id="status-left"></div>
<div class="status-right" id="status-right"></div>
</div>
</div>
</template>
app/renderer/src/components/recap/ClosingCard.vue
+3 -2
View File
@@ -1,6 +1,7 @@
<script setup>
defineProps({
headline: String,
receipts: Array,
stats: Array,
mostSaidPhrase: String,
signoff: String,
@@ -21,8 +22,8 @@ defineProps({
<div class="closing-body">
<div class="closing-headline">{{ headline }}</div>
<div class="closing-stats" v-if="stats">
<div v-for="(line, i) in stats" :key="i">{{ line }}</div>
<div class="closing-stats" v-if="receipts || stats">
<div v-for="(line, i) in (receipts || stats || [])" :key="i">{{ line }}</div>
</div>
<div class="closing-quote" v-if="mostSaidPhrase">
app/renderer/src/components/recap/CoverCard.vue
+2 -1
View File
@@ -6,6 +6,7 @@ const props = defineProps({
archKey: String,
badge: String,
title: String,
claim: String,
subtitle: String,
activity: Array,
footer: String,
@@ -28,7 +29,7 @@ const sealSvg = computed(() => CORNER_SEALS[props.archKey] || '');
<div class="cover-seal-corner" v-html="sealSvg"></div>
<div class="cover-body">
<div class="cover-archetype">{{ title }}</div>
<div class="cover-subtitle">{{ subtitle }}</div>
<div class="cover-subtitle">{{ claim || subtitle }}</div>
<div class="cover-activity">
<div class="cover-activity-row">
app/renderer/src/components/recap/PathCard.vue
+1 -1
View File
@@ -24,7 +24,7 @@ defineProps({
<div class="tl-day">{{ item.day }}</div>
<div class="tl-prompt">{{ item.prompt }}</div>
<div class="tl-outcome">
<span>{{ item.outcome }}</span>
<span>{{ item.turn || item.outcome }}</span>
</div>
</div>
</div>
app/renderer/src/components/recap/VibeCard.vue
+2 -1
View File
@@ -1,6 +1,7 @@
<script setup>
defineProps({
title: String,
voiceLines: Array,
observations: Array,
meter: Object,
quote: Object,
@@ -23,7 +24,7 @@ defineProps({
<div class="vibe-section">
<div class="section-label">Things you kept saying</div>
<div class="vibe-observations">
<div v-for="(obs, i) in observations" :key="i" class="vibe-obs">
<div v-for="(obs, i) in (voiceLines || observations || [])" :key="i" class="vibe-obs">
<div class="vibe-obs-text">{{ obs.text }}</div>
<div class="vibe-obs-meta">
<template v-if="obs.count">×{{ obs.count }} · </template>
app/renderer/src/components/recap/WorkflowCard.vue
+6 -5
View File
@@ -1,6 +1,7 @@
<script setup>
defineProps({
title: String,
deck: String,
summary: String,
stats: String,
items: Array,
@@ -19,7 +20,7 @@ defineProps({
<span class="slot">{{ String(idx).padStart(2, '0') }} · {{ String(total).padStart(2, '0') }}</span>
</div>
<div class="card-title">{{ title }}</div>
<div class="card-deck-text" v-if="summary">{{ summary }}</div>
<div class="card-deck-text" v-if="deck || summary">{{ deck || summary }}</div>
<div class="wf-content">
<div class="wf-stats" v-if="stats">{{ stats }}</div>
@@ -27,7 +28,7 @@ defineProps({
<div class="wf-list">
<div v-for="(item, i) in items" :key="i" class="wf-item">
<div class="wf-item-name">{{ item.name }}</div>
<div class="wf-item-outcome">{{ item.outcome }}</div>
<div class="wf-item-reaction">{{ item.reaction || item.outcome }}</div>
</div>
</div>
@@ -67,12 +68,12 @@ defineProps({
font-family: var(--font-mono); font-size: 13px; font-weight: 500;
color: var(--fg); letter-spacing: -0.005em;
}
.wf-item-outcome {
.wf-item-reaction {
font-family: var(--font-serif); font-style: italic;
font-size: 16px; color: var(--fg-2); line-height: 1.4;
}
.wf-item-outcome::before { content: '\201C'; color: var(--muted-2); }
.wf-item-outcome::after { content: '\201D'; color: var(--muted-2); }
.wf-item-reaction::before { content: '\201C'; color: var(--muted-2); }
.wf-item-reaction::after { content: '\201D'; color: var(--muted-2); }
.wf-verdict {
margin-top: auto; padding: 16px 18px;
app/renderer/src/main.js
+7 -1
View File
@@ -4,6 +4,7 @@ import { createApp } from 'vue';
import App from './App.vue';
import router from './router.js';
import { loadInitialData } from './data.js';
import { noteSessionUpdated, sessionLiveState } from './session-live.mjs';
// Import all original CSS globally
import '../styles/base.css';
@@ -11,7 +12,6 @@ import '../styles/sidebar.css';
import '../styles/toolbar.css';
import '../styles/list.css';
import '../styles/detail.css';
import '../styles/statusbar.css';
const app = createApp(App);
@@ -33,4 +33,10 @@ window.obelisk?.onIndexUpdated?.(() => {
loadInitialData();
});
window.obelisk?.onSessionUpdated?.(({ sessionId } = {}) => {
const route = router.currentRoute.value;
const currentSessionId = route.name === 'SessionDetail' ? String(route.params.id || '') : null;
noteSessionUpdated(sessionLiveState, sessionId, currentSessionId);
});
app.mount('#app');
app/renderer/src/mock/recap-2026-W24.json
+13 -13
View File
@@ -30,7 +30,7 @@
"persona": {
"archetype": "architect",
"title": "The Architect",
"subtitle": "从零设计了一个完整的 memory 系统。",
"claim": "从零设计了一个完整的 memory 系统。",
"tone": "affectionate_teasing"
},
@@ -39,7 +39,7 @@
"type": "cover",
"badge": "Week 24",
"title": "The Architect",
"subtitle": "从零设计了一个完整的 memory 系统。",
"claim": "从零设计了一个完整的 memory 系统。",
"activity": [0.85, 0.92, 0.72, 0.45, 0.88, 0.30, 0],
"footer": "12 sessions · 2.4M tokens"
},
@@ -47,17 +47,17 @@
"type": "thinking_path",
"title": "Five questions, five turns.",
"items": [
{ "day": "Mon", "prompt": "为什么要把 session 编译成 wiki？", "outcome": "raw SQLite, no wiki" },
{ "day": "Tue", "prompt": "buildWhere 是什么", "outcome": "unified filter opts, not DSL" },
{ "day": "Wed", "prompt": "failures() 90% 误报", "outcome": "is_error in JSONL" },
{ "day": "Thu", "prompt": "memory 层需要清理机制吗", "outcome": "soft-delete, human-only" },
{ "day": "Fri", "prompt": "热力图不选中默认显示本月", "outcome": "GitHub-style activity timeline" }
{ "day": "Mon", "prompt": "为什么要把 session 编译成 wiki？", "turn": "raw SQLite, no wiki" },
{ "day": "Tue", "prompt": "buildWhere 是什么", "turn": "unified filter opts, not DSL" },
{ "day": "Wed", "prompt": "failures() 90% 误报", "turn": "is_error in JSONL" },
{ "day": "Thu", "prompt": "memory 层需要清理机制吗", "turn": "soft-delete, human-only" },
{ "day": "Fri", "prompt": "热力图不选中默认显示本月", "turn": "GitHub-style activity timeline" }
]
},
{
"type": "vibe",
"title": "A short character study.",
"observations": [
"voice_lines": [
{ "label": "catchphrase", "text": "这太丑了", "count": 4 },
{ "label": "highest praise", "text": "可以" },
{ "label": "late night", "text": "你在干什么", "time": "02:47 AM" }
@@ -75,19 +75,19 @@
{
"type": "workflow",
"title": "Three workflows. Forty-two agents.",
"summary": "你召唤了机器军团。结果各有不同。",
"deck": "你召唤了机器军团。结果各有不同。",
"stats": "3 workflows · 42 agents",
"items": [
{ "name": "hono-plugin-review", "outcome": "完美" },
{ "name": "vue-migration", "outcome": "你这页面完全和之前的不一样…" },
{ "name": "split-render-js", "outcome": "可以" }
{ "name": "hono-plugin-review", "reaction": "完美" },
{ "name": "vue-migration", "reaction": "你这页面完全和之前的不一样…" },
{ "name": "split-render-js", "reaction": "可以" }
],
"verdict": "Mostly tolerated."
},
{
"type": "closing",
"headline": "19 days",
"stats": ["847 messages exchanged", "12 corrections · 47 approvals"],
"receipts": ["847 messages exchanged", "12 corrections · 47 approvals"],
"most_said_phrase": "好的开始做吧",
"signoff": "See you next week."
}
app/renderer/src/router.js
+6
View File
@@ -13,6 +13,7 @@ const Activity = () => import('./views/Activity.vue');
const Recap = () => import('./views/RecapList.vue');
const RecapDetail = () => import('./views/RecapDetail.vue');
const RecapExport = () => import('./views/RecapExport.vue');
const Settings = () => import('./views/Settings.vue');
const routes = [
{
@@ -65,6 +66,11 @@ const routes = [
name: 'RecapExport',
component: RecapExport
},
{
path: '/settings',
name: 'Settings',
component: Settings
},
{
path: '/',
redirect: '/memory'
app/renderer/src/session-live.mjs
+31
View File
@@ -0,0 +1,31 @@
export function createSessionLiveState() {
return {
dirtySessions: new Set(),
};
}
export const sessionLiveState = createSessionLiveState();
export function noteSessionUpdated(live, sessionId, currentSessionId = null) {
if (!sessionId) return { reload: false, sessionId: null };
if (sessionId === currentSessionId) {
live.dirtySessions.delete(sessionId);
return { reload: true, sessionId };
}
live.dirtySessions.add(sessionId);
return { reload: false, sessionId };
}
export function clearSessionDirty(sessionId, live = sessionLiveState) {
if (sessionId) live.dirtySessions.delete(sessionId);
}
export function consumeSessionDirty(live, sessionId) {
if (!sessionId || !live.dirtySessions.has(sessionId)) return false;
live.dirtySessions.delete(sessionId);
return true;
}
export function consumeGlobalSessionDirty(sessionId) {
return consumeSessionDirty(sessionLiveState, sessionId);
}
app/renderer/src/sidebar-projects.mjs
+52
View File
@@ -0,0 +1,52 @@
function countByProject(items) {
const counts = {};
for (const item of items) {
if (item.project) counts[item.project] = (counts[item.project] || 0) + 1;
}
return counts;
}
function orderedProjectSlugs(projectCounts, projects, formatProjectLabel) {
const seen = new Set();
const ordered = [];
for (const project of projects || []) {
const slug = project?.project;
if (!slug || !projectCounts[slug] || seen.has(slug)) continue;
seen.add(slug);
ordered.push(slug);
}
const missing = Object.keys(projectCounts)
.filter(slug => !seen.has(slug))
.sort((a, b) => formatProjectLabel(a).localeCompare(formatProjectLabel(b)));
return ordered.concat(missing);
}
export function buildSidebarProjects({
routeType,
sessions = [],
memories = [],
projects = [],
view = 'active',
search = '',
formatProjectLabel = slug => slug,
} = {}) {
const items = routeType === 'sessions'
? sessions
: memories.filter(memory => view === 'archived' ? memory.archived : !memory.archived);
const counts = countByProject(items);
const q = search.trim().toLowerCase();
return orderedProjectSlugs(counts, projects, formatProjectLabel)
.filter(slug => {
if (!q) return true;
return formatProjectLabel(slug).toLowerCase().includes(q);
})
.map(slug => ({
slug,
label: formatProjectLabel(slug),
count: counts[slug] || 0,
}));
}
app/renderer/src/views/Activity.vue
+13 -3
View File
@@ -18,6 +18,13 @@ const tooltip = reactive({ text: '', show: false, x: 0, y: 0 });
// --- Constants ---
const DAY_MS = 86400000;
function localDateStr(d) {
const y = d.getFullYear();
const m = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
return `${y}-${m}-${day}`;
}
const MONTHS_SHORT = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
const MONTHS_FULL = ['January','February','March','April','May','June','July','August','September','October','November','December'];
@@ -111,10 +118,13 @@ const longestStreak = computed(() => {
// --- Computed: weekly chart ---
const weeklyBars = computed(() => {
const today = new Date();
today.setHours(0, 0, 0, 0);
let startDate = new Date(today.getTime() - 364 * DAY_MS);
startDate.setHours(0, 0, 0, 0);
const daysUntilSunday = (7 - startDate.getDay()) % 7;
startDate = new Date(startDate.getTime() + daysUntilSunday * DAY_MS);
// Align to Monday (ISO week start)
const dayOfWeek = startDate.getDay(); // 0=Sun, 1=Mon...
const daysUntilMonday = dayOfWeek === 0 ? 1 : (dayOfWeek === 1 ? 0 : 8 - dayOfWeek);
startDate = new Date(startDate.getTime() + daysUntilMonday * DAY_MS);
const dailyMap = {};
for (const d of usageData.daily) dailyMap[d.day] = d.tokens;
@@ -130,7 +140,7 @@ const weeklyBars = computed(() => {
const key = date.toISOString().slice(0, 10);
tokens += dailyMap[key] || 0;
}
weeks.push({ weekStart, tokens, weekKey: weekStart.toISOString().slice(0, 10) });
weeks.push({ weekStart, tokens, weekKey: localDateStr(weekStart) });
}
const maxVal = Math.max(...weeks.map(w => w.tokens), 1);
app/renderer/src/views/MemoryList.vue
+14 -2
View File
@@ -56,7 +56,19 @@ function statusGlyphs(status) {
}
function pathHTML(m) {
return highlightPlain(m.path || '', state.query.trim());
const full = m.path || '';
const filename = full.split('/').pop() || full;
return highlightPlain(filename, state.query.trim());
}
function relativePath(m) {
const full = m.path || '';
if (!m.project) return full;
const projectDir = '/' + m.project.replace(/^-/, '').replace(/-/g, '/');
if (full.startsWith(projectDir)) {
return full.slice(projectDir.length + 1);
}
return full.split('/').slice(-3).join('/');
}
function summaryHTML(m) {
@@ -301,7 +313,7 @@ onUnmounted(() => {
<span class="project-name">{{ formatProjectLabel(detailMemory.project) }}</span>
<span v-if="detailMemory.archived" class="archived-tag">archived</span>
</div>
<div class="detail-path">{{ detailMemory.path }}</div>
<div class="detail-path">{{ relativePath(detailMemory) }}</div>
<div class="detail-summary">{{ detailMemory.summary }}</div>
<div class="detail-meta">
<span>{{ fmtRelative(detailMemory.ts) }}</span>
app/renderer/src/views/RecapDetail.vue
+15 -2
View File
@@ -15,6 +15,7 @@ const route = useRoute();
const recapData = ref(mockJson);
const currentArch = ref(mockJson.persona.archetype);
const currentIdx = ref(0);
const recapFilename = computed(() => String(route.params.id || ''));
const palette = computed(() => PALETTES[currentArch.value] || PALETTES.architect);
const CARD_LABELS = ['Cover', 'Path', 'Vibe', 'Workflow', 'Closing'];
@@ -59,10 +60,18 @@ onUnmounted(() => { unsubRecap?.(); });
watch(() => route.params.id, (id) => { if (id) loadRecap(id); });
async function exportImage() {
await window.obelisk.captureExport({ cardIdx: currentIdx.value, archetype: currentArch.value });
await window.obelisk.captureExport({
cardIdx: currentIdx.value,
archetype: currentArch.value,
filename: recapFilename.value,
});
}
async function copyImage() {
await window.obelisk.copyImage({ cardIdx: currentIdx.value, archetype: currentArch.value });
await window.obelisk.copyImage({
cardIdx: currentIdx.value,
archetype: currentArch.value,
filename: recapFilename.value,
});
}
function goTo(idx) {
@@ -91,6 +100,7 @@ function onKeydown(e) {
:arch-key="currentArch"
:badge="cover.badge"
:title="cover.title"
:claim="cover.claim || cover.subtitle"
:subtitle="cover.subtitle"
:activity="cover.activity"
:footer="cover.footer"
@@ -107,6 +117,7 @@ function onKeydown(e) {
<div class="card-slot" :class="{ active: currentIdx === 2, prev: currentIdx > 2 }">
<VibeCard
:title="vibe.title"
:voice-lines="vibe.voice_lines || vibe.observations"
:observations="vibe.observations"
:meter="vibe.meter"
:quote="vibe.quote"
@@ -116,6 +127,7 @@ function onKeydown(e) {
<div class="card-slot" :class="{ active: currentIdx === 3, prev: currentIdx > 3 }">
<WorkflowCard
:title="workflow.title"
:deck="workflow.deck || workflow.summary"
:summary="workflow.summary"
:stats="workflow.stats"
:items="workflow.items"
@@ -126,6 +138,7 @@ function onKeydown(e) {
<div class="card-slot" :class="{ active: currentIdx === 4, prev: currentIdx > 4 }">
<ClosingCard
:headline="closing.headline"
:receipts="closing.receipts || closing.stats"
:stats="closing.stats"
:most-said-phrase="closing.most_said_phrase"
:signoff="closing.signoff"
app/renderer/src/views/RecapExport.vue
+56 -15
View File
@@ -1,5 +1,5 @@
<script setup>
import { computed } from 'vue';
import { computed, nextTick, onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import CoverCard from '../components/recap/CoverCard.vue';
import PathCard from '../components/recap/PathCard.vue';
@@ -10,15 +10,19 @@ import { PALETTES, ARCH_KEYS } from '../components/recap/archetypes.js';
import recapJson from '../mock/recap-2026-W24.json';
const route = useRoute();
const recapData = ref(recapJson);
window.__OBELISK_RECAP_EXPORT_READY__ = false;
const cardIdx = computed(() => parseInt(route.query.card) || 0);
const archKey = computed(() => route.query.arch || recapJson.persona.archetype);
const exportFilename = computed(() => typeof route.query.file === 'string' ? route.query.file : '');
const archKey = computed(() => route.query.arch || recapData.value.persona?.archetype || recapJson.persona.archetype);
const palette = computed(() => PALETTES[archKey.value] || PALETTES.architect);
const total = computed(() => recapData.value.cards?.length || 5);
const cover = recapJson.cards[0];
const path = recapJson.cards[1];
const vibe = recapJson.cards[2];
const workflow = recapJson.cards[3];
const closing = recapJson.cards[4];
const cover = computed(() => recapData.value.cards?.[0] || recapJson.cards[0]);
const path = computed(() => recapData.value.cards?.[1] || recapJson.cards[1]);
const vibe = computed(() => recapData.value.cards?.[2] || recapJson.cards[2]);
const workflow = computed(() => recapData.value.cards?.[3] || recapJson.cards[3]);
const closing = computed(() => recapData.value.cards?.[4] || recapJson.cards[4]);
const cssVars = computed(() => ({
'--tc': palette.value.tc,
@@ -28,33 +32,70 @@ const cssVars = computed(() => ({
'--tg-soft': palette.value.soft,
'--tg-edge': palette.value.soft,
}));
function setExportReady(value) {
window.__OBELISK_RECAP_EXPORT_READY__ = value;
}
async function markExportReady() {
await nextTick();
await new Promise(resolve => requestAnimationFrame(() => resolve()));
setExportReady(true);
}
let loadSeq = 0;
async function loadExportRecap(filename) {
const seq = ++loadSeq;
setExportReady(false);
try {
if (filename && window.obelisk?.recapRead) {
const data = await window.obelisk.recapRead(filename);
if (seq === loadSeq && data?.cards?.length) {
recapData.value = data;
} else if (seq === loadSeq) {
recapData.value = recapJson;
}
} else if (seq === loadSeq) {
recapData.value = recapJson;
}
} finally {
if (seq === loadSeq) await markExportReady();
}
}
onMounted(() => loadExportRecap(exportFilename.value));
watch(exportFilename, (filename) => loadExportRecap(filename));
</script>
<template>
<div class="export-wrap" :style="cssVars">
<CoverCard v-if="cardIdx === 0"
:arch-key="archKey" :badge="cover.badge" :title="cover.title"
:claim="cover.claim || cover.subtitle"
:subtitle="cover.subtitle" :activity="cover.activity" :footer="cover.footer"
:idx="1" :total="5"
:idx="1" :total="total"
/>
<PathCard v-else-if="cardIdx === 1"
:title="path.title" :items="path.items"
:idx="2" :total="5"
:idx="2" :total="total"
/>
<VibeCard v-else-if="cardIdx === 2"
:title="vibe.title" :observations="vibe.observations"
:title="vibe.title" :voice-lines="vibe.voice_lines || vibe.observations"
:observations="vibe.observations"
:meter="vibe.meter" :quote="vibe.quote"
:idx="3" :total="5"
:idx="3" :total="total"
/>
<WorkflowCard v-else-if="cardIdx === 3"
:title="workflow.title" :summary="workflow.summary"
:title="workflow.title" :deck="workflow.deck || workflow.summary"
:summary="workflow.summary"
:stats="workflow.stats" :items="workflow.items" :verdict="workflow.verdict"
:idx="4" :total="5"
:idx="4" :total="total"
/>
<ClosingCard v-else-if="cardIdx === 4"
:headline="closing.headline" :stats="closing.stats"
:headline="closing.headline" :receipts="closing.receipts || closing.stats"
:stats="closing.stats"
:most-said-phrase="closing.most_said_phrase" :signoff="closing.signoff"
:idx="5" :total="5"
:idx="5" :total="total"
/>
</div>
</template>
app/renderer/src/views/RecapList.vue
+8 -8
View File
@@ -2,7 +2,7 @@
import { ref, computed, onMounted, onUnmounted, inject } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { PALETTES, ARCH_KEYS } from '../components/recap/archetypes.js';
import { MINI_SEALS } from '../components/recap/seals.js';
import { CORNER_SEALS } from '../components/recap/seals.js';
defineOptions({ name: 'RecapList' });
@@ -27,7 +27,7 @@ function glowColor(arch) {
return PALETTES[arch]?.glow || PALETTES.architect.glow;
}
function sealSvg(arch) {
return MINI_SEALS[arch] || MINI_SEALS.architect;
return CORNER_SEALS[arch] || CORNER_SEALS.architect;
}
function formatDateRange(r) {
if (!r.period) return '';
@@ -116,7 +116,7 @@ onUnmounted(() => { unsub?.(); });
<span>{{ formatDateRange(r) }}</span>
</div>
<div class="recap-archetype">{{ r.persona?.title }}</div>
<div class="recap-subtitle">{{ r.persona?.subtitle }}</div>
<div class="recap-subtitle">{{ r.persona?.claim || r.persona?.subtitle }}</div>
<div class="recap-stats">
<span>{{ r.metrics?.sessions || 0 }} sessions</span>
<span class="sep">·</span>
@@ -266,7 +266,7 @@ onUnmounted(() => { unsub?.(); });
.timeline { position: relative; }
.timeline::before {
content: ''; position: absolute;
left: 15px; top: 15px; bottom: 15px;
left: 32px; top: 32px; bottom: 32px;
width: 1px; margin-left: -0.5px;
background: linear-gradient(to bottom,
rgba(167,139,250,0.55) 0%, rgba(167,139,250,0.35) 8%,
@@ -276,19 +276,19 @@ onUnmounted(() => { unsub?.(); });
.recap-row {
position: relative; display: grid;
grid-template-columns: 30px 1fr;
column-gap: 28px; align-items: center;
grid-template-columns: 64px 1fr;
column-gap: 18px; align-items: center;
padding: 12px 0; cursor: pointer;
transition: transform 0.12s;
}
.recap-row:hover { transform: translateX(2px); }
.recap-node {
width: 30px; height: 30px;
width: 64px; height: 64px;
position: relative; z-index: 2;
}
.recap-node::before {
content: ''; position: absolute; inset: -3px;
content: ''; position: absolute; inset: -2px;
border-radius: 50%; background: var(--bg); z-index: -1;
}
.recap-node :deep(svg) {
app/renderer/src/views/SessionDetail.vue
+75 -18
View File
@@ -1,8 +1,9 @@
<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick, onActivated, watch } from 'vue';
import { ref, computed, onMounted, onUnmounted, nextTick, onActivated, onDeactivated, watch } from 'vue';
import { useRouter } from 'vue-router';
import { state, FOLDER_SVG } from '../store.js';
import { loadSessionDetail, isTextTruncated, loadFullText } from '../data.js';
import { clearSessionDirty, consumeGlobalSessionDirty } from '../session-live.mjs';
import {
escapeHTML,
fmtRelative,
@@ -21,6 +22,9 @@ const session = computed(() => state.sessions.find(s => s.id === props.id));
const messages = ref([]);
const loading = ref(false);
const progressPct = ref(0);
const active = ref(false);
let removeSessionUpdated = null;
let keydownAttached = false;
// DOM refs
const wrapRef = ref(null);
@@ -58,51 +62,91 @@ function handleZoom(e) {
}
}
function attachKeydown() {
if (keydownAttached) return;
window.addEventListener('keydown', handleZoom);
keydownAttached = true;
}
function detachKeydown() {
if (!keydownAttached) return;
window.removeEventListener('keydown', handleZoom);
keydownAttached = false;
}
const HINT_KEY = 'obelisk:font-hint-shown';
const showFontHint = ref(false);
onMounted(async () => {
window.addEventListener('keydown', handleZoom);
active.value = true;
attachKeydown();
removeSessionUpdated = window.obelisk?.onSessionUpdated?.(async ({ sessionId } = {}) => {
if (!active.value || !props.id || sessionId !== props.id) return;
clearSessionDirty(props.id);
await loadMessages({ force: true });
}) || null;
if (!localStorage.getItem(HINT_KEY)) {
showFontHint.value = true;
localStorage.setItem(HINT_KEY, '1');
setTimeout(() => { showFontHint.value = false; }, 4000);
}
await loadMessages();
await loadMessages({ force: consumeGlobalSessionDirty(props.id) });
});
onActivated(async () => {
window.addEventListener('keydown', handleZoom);
if (messages.value.length === 0 && props.id) {
await loadMessages();
active.value = true;
attachKeydown();
if (props.id && (messages.value.length === 0 || consumeGlobalSessionDirty(props.id))) {
await loadMessages({ force: true });
}
});
onDeactivated(() => {
active.value = false;
detachKeydown();
});
onUnmounted(() => {
window.removeEventListener('keydown', handleZoom);
active.value = false;
detachKeydown();
removeSessionUpdated?.();
removeSessionUpdated = null;
});
watch(() => props.id, async (newId, oldId) => {
if (newId && newId !== oldId) {
messages.value = [];
await loadMessages();
await loadMessages({ force: consumeGlobalSessionDirty(newId) });
}
});
async function loadMessages() {
async function loadMessages({ force = false } = {}) {
if (!props.id) return;
const wasAtBottom = wrapRef.value && (wrapRef.value.scrollHeight - wrapRef.value.scrollTop - wrapRef.value.clientHeight) < 50;
const prevScrollTop = wrapRef.value?.scrollTop || 0;
loading.value = true;
try {
const s = state.sessions.find(x => x.id === props.id);
if (s && (!s.messages || s.messages.length === 0)) {
if (s && (force || !s.messages || s.messages.length === 0)) {
const loaded = await loadSessionDetail(props.id);
if (loaded) Object.assign(s, loaded);
}
messages.value = s?.messages || [];
const latest = state.sessions.find(x => x.id === props.id);
messages.value = latest?.messages || [];
} finally {
loading.value = false;
}
nextTick(() => {
if (!wrapRef.value) return;
if (wasAtBottom) {
wrapRef.value.scrollTop = wrapRef.value.scrollHeight;
} else {
wrapRef.value.scrollTop = prevScrollTop;
}
});
// Focus pending uuid if any
if (state.pendingFocusUuid) {
const targetUuid = state.pendingFocusUuid;
@@ -120,20 +164,25 @@ async function loadMessages() {
// --- Scroll / progress tracking ---
const currentMsgIdx = ref(0);
const totalMsgs = ref(0);
let navLock = false;
function onScroll() {
if (navLock) return;
if (!wrapRef.value || !detailRef.value) return;
const msgs = detailRef.value.querySelectorAll('.msg, .wf-card, .skill-card');
if (!msgs.length) return;
totalMsgs.value = msgs.length;
const wrapTop = wrapRef.value.getBoundingClientRect().top;
let topMsgIdx = 0;
const el = wrapRef.value;
const navHeight = 52;
const bottomLine = el.getBoundingClientRect().bottom - navHeight;
let bottomMsgIdx = 0;
for (let i = 0; i < msgs.length; i++) {
if (msgs[i].getBoundingClientRect().top <= wrapTop + 50) topMsgIdx = i;
if (msgs[i].getBoundingClientRect().bottom <= bottomLine) bottomMsgIdx = i;
else break;
}
currentMsgIdx.value = topMsgIdx;
const pct = msgs.length <= 1 ? 100 : Math.round((topMsgIdx / (msgs.length - 1)) * 100);
currentMsgIdx.value = bottomMsgIdx;
const pct = msgs.length <= 1 ? 100 : Math.round((bottomMsgIdx / (msgs.length - 1)) * 100);
progressPct.value = pct;
}
@@ -147,8 +196,16 @@ function navTo(target) {
else if (target === 'prev') idx = Math.max(0, currentMsgIdx.value - 1);
else if (target === 'next') idx = Math.min(msgs.length - 1, currentMsgIdx.value + 1);
else return;
const isClose = Math.abs(idx - currentMsgIdx.value) <= 3;
msgs[idx]?.scrollIntoView({ behavior: isClose ? 'smooth' : 'instant', block: 'start' });
currentMsgIdx.value = idx;
navLock = true;
const navHeight = 52;
const el = wrapRef.value;
const msgEl = msgs[idx];
if (!msgEl) return;
const msgBottom = msgEl.offsetTop + msgEl.offsetHeight;
const scrollTarget = msgBottom - el.clientHeight + navHeight;
el.scrollTo({ top: Math.max(0, scrollTarget), behavior: 'instant' });
setTimeout(() => { navLock = false; }, 50);
}
// --- Toggle helpers ---
app/renderer/src/views/SessionList.vue
+118 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { computed } from 'vue';
import { computed, ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { state } from '../store.js';
import { highlightPlain, escapeHTML, formatProjectLabel, fmtListTime, fmtRelative } from '../utils.js';
@@ -7,6 +7,17 @@ import { highlightPlain, escapeHTML, formatProjectLabel, fmtListTime, fmtRelativ
defineOptions({ name: 'SessionList' });
const router = useRouter();
const debugEmpty = ref(false);
function onKeydown(e) {
if (e.key === 'm' && !e.metaKey && !e.ctrlKey && e.target.tagName !== 'INPUT') {
debugEmpty.value = !debugEmpty.value;
}
}
onMounted(() => window.addEventListener('keydown', onKeydown));
onUnmounted(() => window.removeEventListener('keydown', onKeydown));
const homePath = (typeof process !== 'undefined' && process.env?.HOME) || '~';
const visibleSessions = computed(() => {
const q = state.query.trim().toLowerCase();
@@ -81,10 +92,47 @@ function obeliskStyle(session) {
<template>
<div class="session-list-wrap">
<div v-if="!visibleSessions.length" class="empty">
<!-- Empty state: no data source / debug toggle -->
<div v-if="debugEmpty || (!visibleSessions.length && !state.query)" class="empty-content">
<div class="empty-eyebrow">
<span class="diamond"></span>
<span>No data source connected</span>
</div>
<div class="empty-title">Obelisk reads your Claude Code session history.</div>
<div class="empty-body">
We didn't find <code>~/.claude</code> on this machine. If you've already used
Claude Code, point Obelisk at where its data lives in
<button class="inline-link" @click="router.push('/settings')">Settings</button>. If you haven't,
<strong>install Claude Code first</strong> — Obelisk has nothing to read until
sessions exist.
</div>
<div class="empty-actions">
<button class="toolbar-action primary" @click="router.push('/settings')">
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round">
<path d="M2.5 3.5h3.5l1.2 1.2h4.3a1 1 0 0 1 1 1V11a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V4.5a1 1 0 0 1 1-1z"/>
</svg>
Choose folder…
</button>
</div>
<div class="empty-divider"></div>
<div class="empty-help">
<div class="help-row">
<span class="label">expected</span>
<code>~/.claude</code>
</div>
<div class="help-row">
<span class="label">searched</span>
<code>{{ homePath }}</code>
</div>
</div>
</div>
<!-- Empty state: search returned nothing -->
<div v-else-if="!visibleSessions.length" class="empty">
No sessions here.
<span class="hint">{{ state.query ? 'Try a different search term.' : 'Press / to search.' }}</span>
</div>
<div v-else class="session-list">
<div
v-for="s in visibleSessions"
@@ -116,6 +164,8 @@ function obeliskStyle(session) {
flex: 1;
overflow-y: auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.srow {
@@ -217,4 +267,70 @@ function obeliskStyle(session) {
font-size: 11px;
color: var(--muted-2);
}
/* Onboarding empty state */
.empty-content {
flex: 1;
display: flex; flex-direction: column; gap: 16px;
max-width: 520px;
margin: 0 auto;
justify-content: center;
padding: 40px;
}
.empty-eyebrow {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-size: 11px;
color: var(--muted); letter-spacing: 0.04em;
}
.empty-eyebrow .diamond {
width: 6px; height: 6px;
background: var(--accent, #a78bfa); transform: rotate(45deg);
box-shadow: 0 0 6px rgba(167,139,250,0.4); flex-shrink: 0;
}
.empty-title {
font-family: var(--font-serif, Georgia); font-size: 22px;
font-weight: 500; color: var(--fg);
letter-spacing: -0.015em; line-height: 1.2;
}
.empty-body {
font-family: var(--font-serif, Georgia); font-style: italic;
font-size: 14px; color: var(--fg-3); line-height: 1.6; max-width: 460px;
}
.empty-body code {
font-family: var(--font-mono); font-style: normal; font-size: 12.5px;
color: var(--accent-2, #c4b5fd); background: rgba(167,139,250,0.12);
padding: 1px 6px; border-radius: 3px;
}
.empty-body strong { color: var(--fg); font-weight: 600; font-style: normal; }
.empty-body .inline-link {
color: var(--accent-2, #c4b5fd); background: none;
border: none; border-bottom: 1px solid rgba(167,139,250,0.4);
padding: 0 0 1px; font: inherit; cursor: pointer; transition: all 0.12s;
}
.empty-body .inline-link:hover { color: var(--accent, #a78bfa); border-bottom-color: var(--accent); }
.empty-actions { display: flex; gap: 8px; margin-top: 6px; }
.empty-actions .toolbar-action {
display: inline-flex; align-items: center; gap: 6px;
height: 32px; padding: 0 14px; border-radius: 5px;
font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.12s;
}
.empty-actions .toolbar-action.primary {
border: 1px solid rgba(167,139,250,0.35); background: rgba(167,139,250,0.12); color: #c4b5fd;
}
.empty-actions .toolbar-action.primary:hover {
background: rgba(167,139,250,0.18); border-color: #a78bfa; color: var(--fg);
box-shadow: 0 0 12px rgba(167,139,250,0.2);
}
.empty-actions .toolbar-action svg { width: 13px; height: 13px; }
.empty-divider { width: 100%; height: 1px; background: var(--hairline); margin: 6px 0; }
.empty-help {
display: flex; flex-direction: column; gap: 6px;
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
.empty-help .help-row { display: flex; align-items: baseline; gap: 8px; }
.empty-help .help-row .label { color: var(--muted-2); letter-spacing: 0.04em; width: 76px; flex-shrink: 0; }
.empty-help code {
font-family: var(--font-mono); color: var(--fg-2);
background: rgba(0,0,0,0.3); padding: 1px 6px; border-radius: 3px;
}
</style>
app/renderer/src/views/Settings.vue
+372
View File
@@ -0,0 +1,372 @@
<script setup>
import { ref, onMounted, watch } from 'vue';
defineOptions({ name: 'Settings' });
const claudePath = ref('');
const dbPath = ref('');
const recapPath = ref('');
const autoRefresh = ref(true);
const status = ref('ok');
const statusText = ref('Connected');
const sessionCount = ref(0);
const memoryCount = ref(0);
const lastIndexed = ref('');
const rebuilding = ref(false);
const version = ref('0.1.0');
onMounted(async () => {
await loadSettings();
});
async function loadSettings() {
if (!window.obelisk?.getSettings) return;
const s = await window.obelisk.getSettings();
claudePath.value = s.claudeDir || '~/.claude';
dbPath.value = s.dbPath || '';
recapPath.value = s.recapDir || '~/.obelisk/recap';
autoRefresh.value = s.autoRefresh !== false;
sessionCount.value = s.sessionCount || 0;
memoryCount.value = s.memoryCount || 0;
lastIndexed.value = s.lastIndexed || '';
status.value = s.status || 'ok';
statusText.value = s.statusText || 'Connected';
}
async function browsePath() {
if (!window.obelisk?.browseFolder) return;
const result = await window.obelisk.browseFolder();
if (result) {
claudePath.value = result;
await saveSetting('claudeDir', result);
await loadSettings();
}
}
async function browseRecapPath() {
if (!window.obelisk?.browseFolder) return;
const result = await window.obelisk.browseFolder();
if (result) {
recapPath.value = result;
await saveSetting('recapDir', result);
}
}
async function resetPath() {
await saveSetting('claudeDir', null);
await loadSettings();
}
async function toggleAutoRefresh() {
autoRefresh.value = !autoRefresh.value;
await saveSetting('autoRefresh', autoRefresh.value);
}
async function saveSetting(key, value) {
if (window.obelisk?.setSetting) {
await window.obelisk.setSetting(key, value);
}
}
async function commitClaudePath() {
await saveSetting('claudeDir', claudePath.value);
await loadSettings();
}
async function commitRecapPath() {
await saveSetting('recapDir', recapPath.value);
}
async function rebuildIndex() {
if (rebuilding.value || !window.obelisk?.rebuildIndex) return;
rebuilding.value = true;
statusText.value = 'Rebuilding…';
try {
await window.obelisk.rebuildIndex();
await loadSettings();
} finally {
rebuilding.value = false;
}
}
async function revealDb() {
if (window.obelisk?.revealPath) {
window.obelisk.revealPath(dbPath.value);
}
}
function fmtRelative(iso) {
if (!iso) return '';
const diff = Date.now() - new Date(iso).getTime();
const min = Math.floor(diff / 60000);
if (min < 1) return 'just now';
if (min < 60) return `${min}m ago`;
const hr = Math.floor(min / 60);
if (hr < 24) return `${hr}h ago`;
return `${Math.floor(hr / 24)}d ago`;
}
</script>
<template>
<div class="settings-wrap">
<div class="settings-content">
<!-- Data Source -->
<section class="settings-section">
<div class="settings-section-head">
<h2>Data Source</h2>
<p>Where Obelisk reads your Claude Code session history.</p>
</div>
<div class="form-row">
<div>
<div class="form-label">Claude Code path</div>
<div class="form-label-hint">Default <code>~/.claude</code> on macOS &amp; Linux.</div>
</div>
<div class="form-control">
<div class="path-input">
<input
class="path-field"
:class="{ error: status === 'error' }"
type="text"
v-model="claudePath"
spellcheck="false"
@keydown.enter="commitClaudePath"
@blur="commitClaudePath"
/>
<button class="btn" @click="browsePath">
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round">
<path d="M2.5 3.5h3.5l1.2 1.2h4.3a1 1 0 0 1 1 1V11a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V4.5a1 1 0 0 1 1-1z"/>
</svg>
Browse…
</button>
<button class="btn subtle" @click="resetPath" title="Reset to default">
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M12.5 6.5A5 5 0 1 0 12 9.5"/>
<path d="M12.5 2v4.5h-4.5"/>
</svg>
</button>
</div>
<div class="status-row" :class="status">
<span class="status-dot" :class="status"></span>
<span class="status-text">{{ statusText }}</span>
<div class="status-meta" v-if="sessionCount || lastIndexed">
<template v-if="lastIndexed">
<span>last read <strong>{{ fmtRelative(lastIndexed) }}</strong></span>
<span class="sep">·</span>
</template>
<span><strong>{{ sessionCount }}</strong> sessions</span>
<span class="sep">·</span>
<span><strong>{{ memoryCount }}</strong> memories</span>
</div>
</div>
</div>
</div>
<div class="form-row">
<div>
<div class="form-label">Index location</div>
<div class="form-label-hint">SQLite database where Obelisk caches the session index.</div>
</div>
<div class="form-control">
<div class="path-input">
<input class="path-field" type="text" :value="dbPath" spellcheck="false" readonly/>
<button class="btn" @click="revealDb">Reveal</button>
</div>
</div>
</div>
<div class="form-row">
<div>
<div class="form-label">Auto-refresh</div>
<div class="form-label-hint">Obelisk re-reads when new session files appear.</div>
</div>
<div class="form-control">
<label class="toggle-label" @click.prevent="toggleAutoRefresh">
<span class="toggle-track" :class="{ on: autoRefresh }">
<span class="toggle-thumb"></span>
</span>
<span class="toggle-text">Watch <code>.claude</code> for changes</span>
</label>
</div>
</div>
</section>
<!-- Recap -->
<section class="settings-section">
<div class="settings-section-head">
<h2>Recap</h2>
<p>Where generated weekly and monthly recap files live.</p>
</div>
<div class="form-row">
<div>
<div class="form-label">Recap output directory</div>
<div class="form-label-hint">Watched by Obelisk for new <code>recap-*.json</code> files.</div>
</div>
<div class="form-control">
<div class="path-input">
<input
class="path-field"
type="text"
v-model="recapPath"
spellcheck="false"
@keydown.enter="commitRecapPath"
@blur="commitRecapPath"
/>
<button class="btn" @click="browseRecapPath">Browse…</button>
</div>
</div>
</div>
</section>
<!-- About -->
<section class="settings-section last">
<div class="settings-section-head">
<h2>About</h2>
<p>The kind of details you don't usually need.</p>
</div>
<div class="form-row">
<div class="form-label">Version</div>
<div class="form-control version-text">
Obelisk {{ version }}
</div>
</div>
<div class="form-row">
<div class="form-label">Reset</div>
<div class="form-control">
<div class="reset-actions">
<button class="btn" :disabled="rebuilding" @click="rebuildIndex">
{{ rebuilding ? 'Rebuilding…' : 'Rebuild index' }}
</button>
</div>
<div class="reset-hint">
Rebuilding only re-reads your Claude Code data. It does not delete memories or recaps.
</div>
</div>
</div>
</section>
</div>
</div>
</template>
<style scoped>
.settings-wrap { flex: 1; overflow-y: auto; min-height: 0; }
.settings-content { max-width: 720px; margin: 0 auto; padding: 36px 32px 80px; }
.settings-section { margin-bottom: 44px; }
.settings-section.last { margin-bottom: 0; }
.settings-section-head {
margin-bottom: 16px; padding-bottom: 10px;
border-bottom: 1px solid var(--hairline);
}
.settings-section-head h2 {
font-size: 18px; font-weight: 600;
color: var(--fg); letter-spacing: -0.01em; margin-bottom: 2px;
}
.settings-section-head p {
font-size: 13px; color: var(--muted);
}
.form-row {
display: grid; grid-template-columns: 180px 1fr;
gap: 24px; padding: 14px 0; align-items: start;
}
.form-row + .form-row { border-top: 1px solid var(--hairline); }
.form-label { font-size: 13px; color: var(--fg-2); font-weight: 500; padding-top: 6px; }
.form-label-hint {
font-size: 11.5px; color: var(--muted); margin-top: 4px; font-weight: 400;
}
.form-label-hint code {
font-family: var(--font-mono); font-style: normal; font-size: 10.5px;
padding: 1px 4px; background: rgba(0,0,0,0.3); border-radius: 3px; color: var(--muted);
}
.form-control { display: flex; flex-direction: column; gap: 8px; }
.path-input { display: flex; gap: 6px; }
.path-field {
flex: 1; height: 28px; padding: 0 10px;
background: rgba(0,0,0,0.3); border: 1px solid var(--hairline-strong);
border-radius: 5px; font-family: var(--font-mono); font-size: 12px;
color: var(--fg); min-width: 0; transition: all 0.12s;
}
.path-field:focus { outline: 0; border-color: var(--accent); background: rgba(0,0,0,0.4); box-shadow: 0 0 0 2px rgba(167,139,250,0.12); }
.path-field.error { border-color: rgba(248,113,113,0.4); }
.path-field.error:focus { border-color: #f87171; box-shadow: 0 0 0 2px rgba(248,113,113,0.12); }
.tz-field { max-width: 240px; }
.btn {
display: inline-flex; align-items: center; gap: 6px;
height: 28px; padding: 0 12px;
border: 1px solid var(--hairline-strong); border-radius: 5px;
background: var(--surface); color: var(--fg-2);
font-size: 12px; font-weight: 500; cursor: pointer;
transition: all 0.12s; white-space: nowrap;
}
.btn:hover { background: var(--surface-strong); color: var(--fg); border-color: var(--hairline-vivid); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.subtle { background: transparent; border-color: transparent; color: var(--muted); }
.btn.subtle:hover { background: var(--surface); color: var(--fg-2); }
.btn svg { width: 13px; height: 13px; }
.status-row {
display: flex; align-items: center; gap: 14px;
padding: 8px 12px; background: rgba(0,0,0,0.2);
border: 1px solid var(--hairline); border-radius: 5px;
font-family: var(--font-mono); font-size: 11.5px; flex-wrap: wrap;
}
.status-row.ok { border-color: rgba(52,211,153,0.20); background: rgba(52,211,153,0.04); }
.status-row.warn { border-color: rgba(251,191,36,0.20); background: rgba(251,191,36,0.04); }
.status-row.error { border-color: rgba(248,113,113,0.20); background: rgba(248,113,113,0.04); }
.status-dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
position: relative;
}
.status-dot.ok { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,0.5); }
.status-dot.warn { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,0.5); }
.status-dot.error { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,0.5); }
.status-dot.ok::before {
content: ''; position: absolute; inset: -3px;
border-radius: 50%; border: 1px solid #34d399; opacity: 0.5;
animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } }
.status-text { color: var(--fg-2); font-weight: 500; }
.status-text.error { color: #f87171; }
.status-meta { display: flex; gap: 6px; color: var(--muted); align-items: center; flex-wrap: wrap; }
.status-meta strong { color: var(--fg-2); font-weight: 500; }
.status-meta .sep { color: var(--muted-2); }
.toggle-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
position: relative; width: 30px; height: 16px;
background: var(--surface-strong); border: 1px solid var(--hairline-strong);
border-radius: 8px; transition: all 0.15s;
}
.toggle-track.on { background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.5); }
.toggle-thumb {
position: absolute; top: 2px; left: 2px;
width: 10px; height: 10px; border-radius: 50%;
background: var(--muted); transition: all 0.15s;
}
.toggle-track.on .toggle-thumb {
left: 16px; background: #c4b5fd;
box-shadow: 0 0 6px rgba(167,139,250,0.5);
}
.toggle-text { font-size: 12.5px; color: var(--fg-2); }
.toggle-text code {
font-family: var(--font-mono); font-size: 11px;
padding: 1px 4px; background: rgba(0,0,0,0.3); border-radius: 3px;
}
.version-text {
font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); padding-top: 6px;
}
.reset-actions { display: flex; gap: 8px; }
.reset-hint {
font-size: 11.5px; color: var(--muted); margin-top: 6px;
}
</style>