Merge pull request #22 from Unity-Lab-AI/codex/create-functional-ui-voice-activation-circles

Improve voice circle feedback and prompt diagnostics

Author: G-Fourteen

app.js

@@ -66,8 +66,15 @@ function setCircleState(circle, { speaking = false, listening = false, error = f
     circle.classList.toggle('is-error', error);
     circle.classList.toggle('is-active', speaking || listening || error);
 
-    if (label) {
-        circle.setAttribute('aria-label', label);
+    const resolvedLabel = label || circle.dataset.defaultLabel || '';
+
+    if (resolvedLabel) {
+        circle.setAttribute('aria-label', resolvedLabel);
+    }
+
+    const statusText = circle.querySelector('.status-text');
+    if (statusText && resolvedLabel) {
+        statusText.textContent = resolvedLabel;
     }
 }
 
@@ -122,11 +129,19 @@ function updateBackgroundLinkOverlay(urls) {
 
 async function loadSystemPrompt() {
     try {
-        const response = await fetch(resolveAssetPath('ai-instruct.txt'));
+        const response = await fetch(resolveAssetPath('ai-instruct.txt'), {
+            cache: 'no-store'
+        });
         systemPrompt = await response.text();
+        document.body.dataset.systemPromptStatus = 'loaded';
+        console.info(
+            '[Unity Voice]',
+            `System prompt loaded (${systemPrompt.length} characters)`
+        );
     } catch (error) {
         console.error('Error fetching system prompt:', error);
         systemPrompt = 'You are Unity, a helpful AI assistant.';
+        document.body.dataset.systemPromptStatus = 'fallback';
     }
 }
 

index.html

@@ -16,12 +16,24 @@
     <div id="background-urls" aria-hidden="true"></div>
     <main class="layout" aria-live="polite">
         <section class="voice-stage" role="group" aria-label="Voice activity monitors">
-            <article class="voice-circle ai" data-role="ai" aria-label="Unity is idle">
+            <article
+                class="voice-circle ai"
+                data-role="ai"
+                data-default-label="Unity is idle"
+                aria-label="Unity is idle"
+            >
                 <div class="pulse-ring"></div>
+                <span class="status-text" aria-hidden="true">Unity is idle</span>
                 <span class="sr-only">Unity</span>
             </article>
-            <article class="voice-circle user" data-role="user" aria-label="Microphone is muted">
+            <article
+                class="voice-circle user"
+                data-role="user"
+                data-default-label="Microphone is muted"
+                aria-label="Microphone is muted"
+            >
                 <div class="pulse-ring"></div>
+                <span class="status-text" aria-hidden="true">Microphone is muted</span>
                 <span class="sr-only">You</span>
             </article>
         </section>

style.css

@@ -170,6 +170,30 @@ body {
     border-color: rgba(67, 217, 189, 0.6);
 }
 
+.voice-circle .status-text {
+    position: relative;
+    z-index: 2;
+    padding: 0 18px;
+    text-align: center;
+    font-size: clamp(0.82rem, 2.4vw, 1rem);
+    font-weight: 500;
+    letter-spacing: 0.03em;
+    color: rgba(245, 245, 245, 0.88);
+    transition: color 0.4s ease;
+}
+
+.voice-circle.is-error .status-text {
+    color: rgba(255, 161, 181, 0.95);
+}
+
+.voice-circle.is-speaking .status-text {
+    color: rgba(255, 255, 255, 0.96);
+}
+
+.voice-circle.is-listening.user .status-text {
+    color: rgba(193, 255, 244, 0.96);
+}
+
 .voice-circle.is-speaking {
     box-shadow: 0 0 54px -16px rgba(255, 255, 255, 0.75);
     transform: translateY(-6px) scale(1.05);