feat: add orchestration state progress indicator

- OrchestrationProgress stepper component with 5 phases
- Visual state: completed (green check), active (blue ring), pending (gray)
- Smooth CSS transitions between states
- Integrated into chat page, visible during streaming

Closes #8

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shahondin1624
2026-03-12 11:33:41 +01:00
parent fe52d96347
commit 945dbb9f84
4 changed files with 82 additions and 1 deletions

View File

@@ -2,15 +2,19 @@
import type { ChatMessage } from '$lib/types';
import MessageList from '$lib/components/MessageList.svelte';
import MessageInput from '$lib/components/MessageInput.svelte';
import OrchestrationProgress from '$lib/components/OrchestrationProgress.svelte';
import { processRequest, OrchestratorError } from '$lib/services/orchestrator';
import { OrchestrationState } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
let messages: ChatMessage[] = $state([]);
let isStreaming = $state(false);
let error: string | null = $state(null);
let sessionId = $state(crypto.randomUUID());
let orchestrationState: OrchestrationState = $state(OrchestrationState.UNSPECIFIED);
async function handleSend(content: string) {
error = null;
orchestrationState = OrchestrationState.UNSPECIFIED;
const userMessage: ChatMessage = {
id: crypto.randomUUID(),
@@ -32,6 +36,7 @@
try {
for await (const response of processRequest(sessionId, content)) {
orchestrationState = response.state;
const idx = messages.length - 1;
messages[idx] = {
...messages[idx],
@@ -44,7 +49,6 @@
? `Error (${err.code}): ${err.message}`
: 'An unexpected error occurred';
error = msg;
// Update the assistant message with the error
const idx = messages.length - 1;
messages[idx] = {
...messages[idx],
@@ -63,6 +67,10 @@
<MessageList {messages} />
{#if isStreaming}
<OrchestrationProgress state={orchestrationState} />
{/if}
{#if isStreaming && messages.length > 0 && messages[messages.length - 1].content === ''}
<div class="flex justify-start px-4 pb-2">
<div class="flex items-center gap-1.5 rounded-2xl bg-gray-200 px-4 py-2.5">