Add home screen with voice interface and navigation

- Voice-first home screen with tap-to-speak MicButton
- Real-time agent reasoning UI showing tool call progression
- Emergency banner for high/emergency urgency detection
- Quick action cards: Doctor, Medicine, Food, Check-in
- Check-in countdown timer with visual progress
- Bottom navigation: Home, Timeline, Doctor, Medicine, About
- App layout with global state provider
- Public assets: icons, placeholders

Built with Mistral Vibe

app/(app)/layout.tsx

@@ -0,0 +1,11 @@
+import { BottomNav } from "@/components/sickbuddy/bottom-nav"
+import { AppProvider } from "@/lib/app-context"
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <AppProvider>
+      {children}
+      <BottomNav />
+    </AppProvider>
+  )
+}

app/(app)/page.tsx

@@ -0,0 +1,5 @@
+import { HomeScreen } from "@/components/sickbuddy/home-screen"
+
+export default function HomePage() {
+  return <HomeScreen />
+}

components/sickbuddy/bottom-nav.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { Home, ClipboardList, Stethoscope, Pill, Info } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const navItems = [
+  { href: "/", icon: Home, label: "Home" },
+  { href: "/timeline", icon: ClipboardList, label: "Timeline" },
+  { href: "/doctor", icon: Stethoscope, label: "Doctor" },
+  { href: "/medication", icon: Pill, label: "Medicine" },
+  { href: "/about", icon: Info, label: "About" },
+]
+
+export function BottomNav() {
+  const pathname = usePathname()
+
+  // Don't show bottom nav on check-in or emergency screens
+  if (pathname === "/checkin" || pathname === "/emergency") return null
+
+  return (
+    <nav
+      className="fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-[430px] z-50"
+      aria-label="Main navigation"
+    >
+      <div className="flex items-center justify-around border-t border-border bg-background/80 backdrop-blur-xl px-2 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]">
+        {navItems.map((item) => {
+          const isActive = pathname === item.href
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                "flex flex-col items-center gap-1 min-w-[60px] min-h-[48px] justify-center rounded-xl px-3 py-1.5 transition-colors duration-200",
+                isActive
+                  ? "text-primary"
+                  : "text-muted-foreground hover:text-foreground"
+              )}
+              aria-current={isActive ? "page" : undefined}
+            >
+              <item.icon className="h-5 w-5" />
+              <span className="text-[10px] font-medium">{item.label}</span>
+            </Link>
+          )
+        })}
+      </div>
+    </nav>
+  )
+}

components/sickbuddy/home-screen.tsx

@@ -0,0 +1,272 @@
+"use client"
+
+import { useState, useRef, useEffect } from "react"
+import Link from "next/link"
+import { ClipboardList, Volume2, Stethoscope, Pill, UtensilsCrossed, Bot, Zap } from "lucide-react"
+import {
+  AppShell,
+  SickBuddyLogo,
+  GlassCard,
+  MicButton,
+  WaveBars,
+} from "./design-system"
+import { cn } from "@/lib/utils"
+import { VoxtralRecorder } from "@/lib/voxtral"
+import { speak, stopSpeaking } from "@/lib/elevenlabs"
+import { agentAnalyze, analyzeSymptoms, AGENT_TOOL_DISPLAY } from "@/lib/mistral"
+import type { AgentStep } from "@/lib/mistral"
+import { useApp, formatCountdown, countdownProgress } from "@/lib/app-context"
+
+type VoiceState = "idle" | "listening" | "processing" | "responding"
+
+const actionCards = [
+  { label: "See a Doctor", href: "/doctor", icon: Stethoscope },
+  { label: "Get Medicine", href: "/medication", icon: Pill },
+  { label: "Order Food", href: "/food", icon: UtensilsCrossed },
+]
+
+export function HomeScreen() {
+  const [voiceState, setVoiceState] = useState<VoiceState>("idle")
+  const [displayText, setDisplayText] = useState(
+    "Hi! I'm SickBuddy. Tap the microphone and tell me how you're feeling."
+  )
+  const [isReplaying, setIsReplaying] = useState(false)
+  const [agentSteps, setAgentSteps] = useState<AgentStep[]>([])
+  const [showAgentSteps, setShowAgentSteps] = useState(false)
+  const [agentTime, setAgentTime] = useState(0)
+  const recorderRef = useRef<VoxtralRecorder | null>(null)
+  const { analysis, setAnalysis, addMessage, conversationHistory, nextCheckInMs } = useApp()
+
+  useEffect(() => {
+    if (analysis?.response) setDisplayText(analysis.response)
+  }, [analysis])
+
+  async function handleMicClick() {
+    if (voiceState === "listening") {
+      await stopRecording()
+    } else if (voiceState === "idle" || voiceState === "responding") {
+      await startRecording()
+    }
+  }
+
+  async function startRecording() {
+    try {
+      stopSpeaking()
+      recorderRef.current = new VoxtralRecorder()
+      await recorderRef.current.startRecording()
+      setVoiceState("listening")
+      setAgentSteps([])
+      setShowAgentSteps(false)
+    } catch {
+      alert("Please allow microphone access to use SickBuddy.")
+    }
+  }
+
+  async function stopRecording() {
+    if (!recorderRef.current) return
+    setVoiceState("processing")
+    try {
+      // Voxtral now returns BOTH transcription AND audio understanding
+      // (voice quality, coughs, breathing, emotional tone)
+      const { text: transcript, audioContext } = await recorderRef.current.stopAndTranscribe()
+      addMessage("user", transcript)
+
+      // Log audio observations for debugging
+      if (audioContext) {
+        console.log("[Audio Understanding]", audioContext)
+      }
+
+      // Use agent-based analysis (with tool calling) as primary
+      // Audio context gives the agent "ears" — like a real doctor listening
+      let result
+      try {
+        result = await agentAnalyze(transcript, conversationHistory, audioContext)
+        if (result.agentSteps) setAgentSteps(result.agentSteps)
+        if (result.agentMeta) setAgentTime(result.agentMeta.totalTime)
+      } catch {
+        console.warn("Agent failed, falling back to simple analysis")
+        result = await analyzeSymptoms(transcript, conversationHistory)
+      }
+
+      setAnalysis(result)
+      addMessage("assistant", result.response)
+      setDisplayText(result.response)
+      setVoiceState("responding")
+      await speak(result.response)
+    } catch {
+      setDisplayText("Sorry, I had trouble with that. Please try again.")
+      setVoiceState("responding")
+    }
+  }
+
+  async function handleReplay() {
+    if (isReplaying || !displayText) return
+    setIsReplaying(true)
+    await speak(displayText)
+    setIsReplaying(false)
+  }
+
+  const statusText: Record<VoiceState, string> = {
+    idle: "Tap and speak...",
+    listening: "I'm listening... (tap to stop)",
+    processing: "SickBuddy is thinking...",
+    responding: "",
+  }
+
+  return (
+    <AppShell className="flex flex-col min-h-screen pb-24">
+      {/* Top bar */}
+      <header className="flex items-center justify-between px-4 py-3">
+        <SickBuddyLogo />
+        <Link
+          href="/timeline"
+          className="flex h-10 w-10 items-center justify-center rounded-xl transition-colors duration-200 hover:bg-secondary"
+          aria-label="Health Timeline"
+        >
+          <ClipboardList className="h-5 w-5 text-muted-foreground" />
+        </Link>
+      </header>
+
+      {/* Emergency banner */}
+      {analysis?.urgency === "emergency" && (
+        <Link href="/emergency" className="mx-4 mb-2">
+          <div className="flex items-center gap-2 rounded-2xl border border-danger/30 bg-danger/10 px-4 py-3 animate-pulse">
+            <span>🚨</span>
+            <p className="text-sm font-semibold text-danger">Your symptoms need immediate attention</p>
+          </div>
+        </Link>
+      )}
+
+      {/* Center hero */}
+      <div className="flex-1 flex flex-col items-center justify-center px-4 gap-6">
+        <MicButton
+          state={voiceState === "responding" ? "idle" : voiceState}
+          onClick={handleMicClick}
+          size={120}
+        />
+
+        {/* Status */}
+        {voiceState === "listening" && (
+          <div className="flex flex-col items-center gap-3">
+            <p className="text-sm font-medium text-foreground">{statusText.listening}</p>
+            <WaveBars />
+          </div>
+        )}
+        {voiceState === "processing" && (
+          <div className="flex flex-col items-center gap-3">
+            <div className="flex items-center gap-2">
+              <Bot className="h-4 w-4 text-primary animate-pulse" />
+              <p className="text-sm font-medium text-foreground">Agent is analyzing...</p>
+            </div>
+            <div className="flex gap-3 mt-1">
+              {["🔍", "💊", "📅", "🏥"].map((emoji, i) => (
+                <span
+                  key={emoji}
+                  className="text-lg opacity-30 animate-pulse"
+                  style={{ animationDelay: `${i * 0.4}s` }}
+                >
+                  {emoji}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Response / Welcome card */}
+        {(voiceState === "idle" || voiceState === "responding") && displayText && (
+          <GlassCard className="animate-fade-in-up w-full relative">
+            <button
+              type="button"
+              onClick={handleReplay}
+              className={cn(
+                "absolute top-3 right-3 flex h-8 w-8 items-center justify-center rounded-lg hover:bg-secondary transition-colors duration-200",
+                isReplaying && "text-primary"
+              )}
+              aria-label="Replay audio"
+            >
+              <Volume2 className={cn("h-4 w-4", isReplaying ? "text-primary" : "text-muted-foreground")} />
+            </button>
+            <p className="text-sm leading-relaxed text-foreground pr-10">{displayText}</p>
+          </GlassCard>
+        )}
+
+        {/* Agent Reasoning Steps */}
+        {agentSteps.length > 0 && (voiceState === "idle" || voiceState === "responding") && (
+          <div className="w-full animate-fade-in-up" style={{ animationDelay: "0.2s" }}>
+            <button
+              type="button"
+              onClick={() => setShowAgentSteps(!showAgentSteps)}
+              className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors mb-2 px-1"
+            >
+              <Zap className="h-3 w-3 text-primary" />
+              <span>
+                Agent used {agentSteps.length} tools
+                {agentTime > 0 && ` in ${(agentTime / 1000).toFixed(1)}s`}
+              </span>
+              <span className="text-muted-foreground/50">{showAgentSteps ? "▲" : "▼"}</span>
+            </button>
+
+            {showAgentSteps && (
+              <GlassCard className="!p-3 !gap-2 flex flex-col">
+                <div className="flex items-center gap-1.5 mb-1">
+                  <Bot className="h-3.5 w-3.5 text-primary" />
+                  <span className="text-xs font-semibold text-foreground">Agent Reasoning</span>
+                </div>
+                {agentSteps.map((step, i) => {
+                  const display = AGENT_TOOL_DISPLAY[step.tool] || { icon: "🔧", label: step.tool }
+                  return (
+                    <div key={i} className="flex items-start gap-2 text-xs">
+                      <span className="flex-shrink-0 mt-0.5">{display.icon}</span>
+                      <div className="flex-1 min-w-0">
+                        <span className="font-medium text-foreground">{display.label}</span>
+                        <span className="text-muted-foreground ml-1.5">{step.summary}</span>
+                      </div>
+                      <span className="text-muted-foreground/40 flex-shrink-0 text-[10px] tabular-nums">
+                        {step.timestamp > 0 ? `${(step.timestamp / 1000).toFixed(1)}s` : ""}
+                      </span>
+                    </div>
+                  )
+                })}
+              </GlassCard>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Action Cards */}
+      <div className="px-4 pb-4">
+        <div className="flex gap-3 overflow-x-auto pb-2 -mx-4 px-4 scrollbar-none">
+          {actionCards.map((card) => (
+            <Link
+              key={card.href}
+              href={card.href}
+              className="flex-shrink-0 flex flex-col items-center gap-2 rounded-2xl border border-border bg-card p-4 w-[120px] transition-all duration-200 hover:bg-secondary hover:border-primary/20"
+            >
+              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10">
+                <card.icon className="h-5 w-5 text-primary" />
+              </div>
+              <span className="text-xs font-medium text-foreground text-center">{card.label}</span>
+            </Link>
+          ))}
+        </div>
+      </div>
+
+      {/* Check-in countdown */}
+      <div className="px-4 pb-4">
+        <Link href="/checkin">
+          <GlassCard className="flex flex-col gap-2 !p-3 hover:bg-secondary/50 transition-colors">
+            <div className="flex items-center justify-between">
+              <p className="text-xs text-muted-foreground">
+                Next check-in in <span className="text-foreground font-medium">{formatCountdown(nextCheckInMs)}</span>
+              </p>
+              <span className="text-xs text-primary">Check in now →</span>
+            </div>
+            <div className="h-1 w-full rounded-full bg-secondary overflow-hidden">
+              <div className="h-full rounded-full bg-primary transition-all duration-500" style={{ width: `${countdownProgress(nextCheckInMs)}%` }} />
+            </div>
+          </GlassCard>
+        </Link>
+      </div>
+    </AppShell>
+  )
+}