mirror of
https://github.com/lukaszraczylo/claude-mnemonic.git
synced 2026-06-14 02:11:34 +00:00
123 lines
3.5 KiB
Vue
123 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { useSSE, useStats, useTimeline, useUpdate, useHealth } from '@/composables'
|
|
import Header from '@/components/Header.vue'
|
|
import StatsCards from '@/components/StatsCards.vue'
|
|
import FilterTabs from '@/components/FilterTabs.vue'
|
|
import Timeline from '@/components/Timeline.vue'
|
|
import Sidebar from '@/components/Sidebar.vue'
|
|
|
|
// Composables
|
|
const { isConnected, isReconnecting, reconnectCountdown, isProcessing, queueDepth } = useSSE()
|
|
const { updateInfo, updateStatus, isUpdating, applyUpdate } = useUpdate()
|
|
const { health } = useHealth()
|
|
// Initialize useTimeline first to get currentProject ref
|
|
const {
|
|
filteredItems,
|
|
loading,
|
|
observationCount,
|
|
promptCount,
|
|
summaryCount,
|
|
currentFilter,
|
|
currentProject,
|
|
currentTypeFilter,
|
|
currentConceptFilter,
|
|
refresh,
|
|
setFilter,
|
|
setProject,
|
|
setTypeFilter,
|
|
setConceptFilter
|
|
} = useTimeline()
|
|
// Pass currentProject ref to useStats for project-specific retrieval stats
|
|
const { stats } = useStats(currentProject)
|
|
|
|
// Note: Timeline refresh is handled by useTimeline's SSE watcher
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen">
|
|
<!-- Reconnection Banner -->
|
|
<Transition name="slide">
|
|
<div
|
|
v-if="isReconnecting"
|
|
class="fixed top-0 left-0 right-0 z-50 bg-amber-500/90 backdrop-blur-sm text-black px-4 py-2 text-center text-sm font-medium shadow-lg"
|
|
>
|
|
<i class="fas fa-sync-alt fa-spin mr-2" />
|
|
Connection lost. Reconnecting<span v-if="reconnectCountdown > 0"> in {{ reconnectCountdown }}s</span>...
|
|
</div>
|
|
</Transition>
|
|
|
|
<!-- Header -->
|
|
<Header
|
|
:is-connected="isConnected"
|
|
:is-processing="isProcessing"
|
|
:update-info="updateInfo"
|
|
:update-status="updateStatus"
|
|
:is-updating="isUpdating"
|
|
@refresh="refresh"
|
|
@apply-update="applyUpdate"
|
|
/>
|
|
|
|
<!-- Main Content -->
|
|
<main class="max-w-7xl mx-auto px-4 py-6">
|
|
<!-- Stats Cards -->
|
|
<StatsCards
|
|
:stats="stats"
|
|
:queue-depth="queueDepth"
|
|
/>
|
|
|
|
<!-- Two Column Layout -->
|
|
<div class="flex gap-6">
|
|
<!-- Sidebar -->
|
|
<Sidebar
|
|
:stats="stats"
|
|
:observation-count="observationCount"
|
|
:prompt-count="promptCount"
|
|
:summary-count="summaryCount"
|
|
:current-project="currentProject"
|
|
:health="health"
|
|
@update:project="setProject"
|
|
/>
|
|
|
|
<!-- Activity Timeline Section -->
|
|
<section class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<i class="fas fa-list text-claude-400" />
|
|
<h2 class="text-lg font-semibold text-white">Activity Timeline</h2>
|
|
</div>
|
|
|
|
<!-- Filter Tabs -->
|
|
<FilterTabs
|
|
:current-filter="currentFilter"
|
|
:current-type-filter="currentTypeFilter"
|
|
:current-concept-filter="currentConceptFilter"
|
|
:observation-count="observationCount"
|
|
:prompt-count="promptCount"
|
|
@update:filter="setFilter"
|
|
@update:type-filter="setTypeFilter"
|
|
@update:concept-filter="setConceptFilter"
|
|
/>
|
|
|
|
<!-- Timeline -->
|
|
<Timeline
|
|
:items="filteredItems"
|
|
:loading="loading"
|
|
/>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.slide-enter-active,
|
|
.slide-leave-active {
|
|
transition: transform 0.3s ease, opacity 0.3s ease;
|
|
}
|
|
|
|
.slide-enter-from,
|
|
.slide-leave-to {
|
|
transform: translateY(-100%);
|
|
opacity: 0;
|
|
}
|
|
</style>
|