init: Kira — AI body double with Honcho memory

Full voice pipeline (Whisper STT -> DeepSeek LLM -> OpenAI TTS), animated SVG avatar (Live2D-ready), girly-pop UI, lofi music, timer/notes/pets/wardrobe widgets, 10 background scenes with particle effects, Honcho cross-session memory.
2026-06-04 10:51:38 -04:00
commit 97424cb98f
47 changed files with 5691 additions and 0 deletions
@@ -0,0 +1,125 @@
+import { useState } from 'react';
+import Clock from './components/Clock';
+import BackgroundScene from './components/BackgroundScene';
+import MusicPlayer from './components/MusicPlayer';
+import Timer from './components/Timer';
+import Notes from './components/Notes';
+import KiraAvatar from './components/KiraAvatar';
+import ChatBubble from './components/ChatBubble';
+import PetZone from './components/PetZone';
+import Wardrobe from './components/Wardrobe';
+import Toolbar from './components/Toolbar';
+import Particles from './components/Particles';
+import { SCENES, type Scene } from './components/scenes';
+import { useConversation } from './hooks/useConversation';
+
+export default function App() {
+  const [currentSceneId, setCurrentSceneId] = useState('cozy-room');
+  const [currentOutfit, setCurrentOutfit] = useState('cozy-hoodie');
+  const [currentAcc, setCurrentAcc] = useState<string | null>(null);
+  const [textInput, setTextInput] = useState('');
+
+  const currentScene: Scene = SCENES.find((s) => s.id === currentSceneId) ?? SCENES[0];
+  const { messages, isConnected, isKiraSpeaking, isRecording, sendText, startRecording, stopRecording } = useConversation();
+
+  const handleTalkToggle = () => {
+    if (isRecording) stopRecording();
+    else startRecording();
+  };
+
+  const handleTextSend = () => {
+    if (!textInput.trim()) return;
+    sendText(textInput.trim());
+    setTextInput('');
+  };
+
+  return (
+    <div
+      className="min-h-screen relative transition-all duration-1000"
+      style={{ background: currentScene.gradient }}
+    >
+      <Particles type={currentScene.particles ?? 'none'} />
+
+      <div className="relative z-20 h-screen flex flex-col">
+        {/* Top toolbar */}
+        <div className="px-4 pt-4">
+          <Toolbar currentScene={currentSceneId} onSceneChange={setCurrentSceneId} />
+        </div>
+
+        {/* Main grid — scrollable center */}
+        <div className="flex-1 overflow-y-auto px-4 py-4 scrollbar-thin">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 max-w-7xl mx-auto">
+
+            {/* Column 1: Kira + Clock */}
+            <div className="space-y-4">
+              <Clock />
+              <KiraAvatar
+                isSpeaking={isKiraSpeaking}
+                isListening={isRecording}
+                outfit={currentOutfit}
+                accessory={currentAcc}
+                onTalkToggle={handleTalkToggle}
+              />
+            </div>
+
+            {/* Column 2: Timer + Music */}
+            <div className="space-y-4">
+              <Timer />
+              <MusicPlayer />
+            </div>
+
+            {/* Column 3: Chat + Text Input */}
+            <div className="space-y-4">
+              <ChatBubble messages={messages} isKiraSpeaking={isKiraSpeaking} />
+              
+              {/* Text input fallback */}
+              <div className="glass-card p-3">
+                <div className="flex gap-2">
+                  <input
+                    value={textInput}
+                    onChange={(e) => setTextInput(e.target.value)}
+                    onKeyDown={(e) => e.key === 'Enter' && handleTextSend()}
+                    placeholder="type a message..."
+                    className="flex-1 bg-white/60 rounded-xl px-3 py-2 text-sm text-kira-plum placeholder-kira-plum/30 border border-kira-pink/20 focus:outline-none focus:border-kira-pink/50"
+                  />
+                  <button
+                    onClick={handleTextSend}
+                    className="btn-kira px-3 text-sm"
+                  >
+                    Send
+                  </button>
+                </div>
+                {/* Connection indicator */}
+                <div className="flex items-center gap-2 mt-2 text-[10px] text-kira-plum/30">
+                  <span className={`w-1.5 h-1.5 rounded-full ${isConnected ? 'bg-kira-mint' : 'bg-red-300'}`} />
+                  {isConnected ? 'connected' : 'connecting...'}
+                </div>
+              </div>
+            </div>
+
+            {/* Column 4: Cats + Wardrobe */}
+            <div className="space-y-4">
+              <PetZone />
+              <Wardrobe onOutfitChange={setCurrentOutfit} onAccessoryChange={setCurrentAcc} />
+            </div>
+
+          </div>
+        </div>
+
+        {/* Bottom bar */}
+        <div className="px-4 pb-4">
+          <div className="glass-card px-4 py-2 flex items-center justify-between text-xs text-kira-plum/40">
+            <div className="flex items-center gap-3">
+              <span className={`w-2 h-2 rounded-full ${isRecording ? 'bg-red-400 animate-pulse' : isKiraSpeaking ? 'bg-kira-pink animate-pulse' : 'bg-kira-mint'} inline-block`} />
+              <span>{isRecording ? 'listening...' : isKiraSpeaking ? 'kira speaking' : 'kira is here'}</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <span className="hidden sm:inline">{isConnected ? 'body double mode' : 'offline'}</span>
+              <span>🌸</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}