Add streaming status UX and model load state indicator
Streaming status transparency:
- generation_task.py emits 'status' SSE events at each pipeline stage:
"Analyzing your request..." before intent classification, tool label
before each tool execution, "Generating/Composing response..." before
each LLM streaming round
- chat.ts adds streamingStatus ref; cleared on first chunk or done/error;
includes fast 5s poll loop after warmModel() until model shows as loaded
- ChatView.vue shows pulsing dot + italic status label above content area;
falls back to blinking cursor once content arrives
- HomeView.vue shows status label in dashboard panel instead of '...'
Model load state indicator:
- /api/chat/status now queries /api/tags and /api/ps in parallel to
distinguish installed-but-cold vs loaded-in-VRAM model states
- New model status values: 'not_found' | 'cold' | 'loaded' (was 'ready')
- chatReady true for both 'cold' and 'loaded' (cold models still work)
- AppHeader shows 5 states: gray pulse (checking), red (Ollama down),
orange (not installed), yellow pulse (cold), green (loaded)
- Inline short label ("Cold", "Ready", "Offline", etc.) visible without
hovering; detailed tooltip on hover
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -14,18 +14,31 @@ const chatStore = useChatStore();
|
||||
const router = useRouter();
|
||||
const mobileMenuOpen = ref(false);
|
||||
|
||||
const statusShortLabel = computed(() => {
|
||||
if (chatStore.ollamaStatus === "unavailable") return "Offline";
|
||||
if (chatStore.ollamaStatus === "checking") return "Checking";
|
||||
if (chatStore.modelStatus === "not_found") return "No model";
|
||||
if (chatStore.modelStatus === "cold") return "Cold";
|
||||
if (chatStore.modelStatus === "loaded") return "Ready";
|
||||
return "Checking";
|
||||
});
|
||||
|
||||
const statusLabel = computed(() => {
|
||||
if (chatStore.ollamaStatus === "unavailable") return "Ollama unavailable";
|
||||
if (chatStore.modelStatus === "not_found") return "Model downloading...";
|
||||
if (chatStore.chatReady) return "Connected";
|
||||
if (chatStore.ollamaStatus === "checking") return "Checking...";
|
||||
if (chatStore.modelStatus === "not_found") return "Model not installed";
|
||||
if (chatStore.modelStatus === "cold") return "Model cold — first response may be slow";
|
||||
if (chatStore.modelStatus === "loaded") return "Model loaded · ready";
|
||||
return "Checking...";
|
||||
});
|
||||
|
||||
const statusClass = computed(() => {
|
||||
if (chatStore.ollamaStatus === "unavailable") return "status-red";
|
||||
if (chatStore.modelStatus === "not_found") return "status-yellow";
|
||||
if (chatStore.chatReady) return "status-green";
|
||||
return "status-yellow";
|
||||
if (chatStore.ollamaStatus === "checking") return "status-gray";
|
||||
if (chatStore.modelStatus === "not_found") return "status-orange";
|
||||
if (chatStore.modelStatus === "cold") return "status-yellow";
|
||||
if (chatStore.modelStatus === "loaded") return "status-green";
|
||||
return "status-gray";
|
||||
});
|
||||
|
||||
function toggleMobileMenu() {
|
||||
@@ -67,6 +80,7 @@ router.afterEach(() => {
|
||||
<router-link v-if="authStore.isAdmin" to="/admin/logs" class="nav-link">Logs</router-link>
|
||||
<span class="status-indicator" :class="statusClass" :title="statusLabel">
|
||||
<span class="status-dot"></span>
|
||||
<span class="status-text">{{ statusShortLabel }}</span>
|
||||
</span>
|
||||
<button class="btn-shortcuts" @click="toggleShortcuts" title="Keyboard shortcuts (?)">
|
||||
?
|
||||
@@ -147,7 +161,9 @@ router.afterEach(() => {
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
margin-left: 0.5rem;
|
||||
cursor: default;
|
||||
}
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
@@ -155,19 +171,31 @@ router.afterEach(() => {
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.status-text {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.status-green .status-dot {
|
||||
background: var(--color-success);
|
||||
background: var(--color-success, #2ecc71);
|
||||
}
|
||||
.status-yellow .status-dot {
|
||||
background: var(--color-warning);
|
||||
background: var(--color-warning, #f59e0b);
|
||||
animation: pulse-dot 2s infinite;
|
||||
}
|
||||
.status-orange .status-dot {
|
||||
background: #f97316;
|
||||
}
|
||||
.status-red .status-dot {
|
||||
background: var(--color-danger);
|
||||
background: var(--color-danger, #e74c3c);
|
||||
}
|
||||
.status-gray .status-dot {
|
||||
background: var(--color-text-muted);
|
||||
animation: pulse-dot 2s infinite;
|
||||
}
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
.btn-shortcuts {
|
||||
background: none;
|
||||
|
||||
Reference in New Issue
Block a user