Upload 43 files

App.tsx

@@ -0,0 +1,94 @@
+import React, { useState, useContext, useEffect } from 'react';
+import { AuthProvider, AuthContext } from './context/AuthContext';
+import Sidebar from './components/Sidebar';
+import AiStewardView from './views/AiStewardView';
+import PestLibraryView from './views/PestLibraryView';
+import SeasonalGuideView from './views/SeasonalGuideView';
+import ToolGuideView from './views/ToolGuideView';
+import BonsaiDiaryView from './views/BonsaiDiaryView';
+import HealthCheckView from './views/HealthCheckView';
+import SpeciesIdentifierView from './views/SpeciesIdentifierView';
+import DesignStudioView from './views/DesignStudioView';
+import WiringGuideView from './views/WiringGuideView';
+import SoilAnalyzerView from './views/SoilAnalyzerView';
+import NebariDeveloperView from './views/NebariDeveloperView';
+import PotCalculatorView from './views/PotCalculatorView';
+import SunTrackerView from './views/SunTrackerView';
+import FertilizerMixerView from './views/FertilizerMixerView';
+import SoilVolumeCalculatorView from './views/SoilVolumeCalculatorView';
+import WeatherShieldView from './views/WeatherShieldView';
+import SettingsView from './views/SettingsView';
+import LoginView from './views/LoginView';
+import { View } from './types';
+import Spinner from './components/Spinner';
+
+const AppContent: React.FC = () => {
+  const { user, isLoading } = useContext(AuthContext);
+  const [activeView, setActiveView] = useState<View>('garden');
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/service-worker.js').then(registration => {
+          console.log('ServiceWorker registration successful with scope: ', registration.scope);
+        }).catch(error => {
+          console.log('ServiceWorker registration failed: ', error);
+        });
+      });
+    }
+  }, []);
+  
+  const renderView = () => {
+    switch (activeView) {
+      case 'steward': return <AiStewardView setActiveView={setActiveView} />;
+      case 'pests': return <PestLibraryView setActiveView={setActiveView} />;
+      case 'seasons': return <SeasonalGuideView setActiveView={setActiveView} />;
+      case 'tools': return <ToolGuideView />;
+      case 'garden': return <BonsaiDiaryView setActiveView={setActiveView} />;
+      case 'healthCheck': return <HealthCheckView setActiveView={setActiveView} />;
+      case 'speciesIdentifier': return <SpeciesIdentifierView setActiveView={setActiveView} />;
+      case 'designStudio': return <DesignStudioView setActiveView={setActiveView} />;
+      case 'wiringGuide': return <WiringGuideView setActiveView={setActiveView} />;
+      case 'soilAnalyzer': return <SoilAnalyzerView setActiveView={setActiveView} />;
+      case 'nebariDeveloper': return <NebariDeveloperView setActiveView={setActiveView} />;
+      case 'potCalculator': return <PotCalculatorView />;
+      case 'sunTracker': return <SunTrackerView />;
+      case 'fertilizerMixer': return <FertilizerMixerView />;
+      case 'soilVolumeCalculator': return <SoilVolumeCalculatorView />;
+      case 'weatherShield': return <WeatherShieldView />;
+      case 'settings': return <SettingsView />;
+      default: return <BonsaiDiaryView setActiveView={setActiveView} />;
+    }
+  };
+
+  if (isLoading) {
+    return <div className="flex items-center justify-center h-screen bg-stone-100"><Spinner text="Loading Yuki..." /></div>;
+  }
+  
+  if (!user) {
+    return <LoginView />;
+  }
+
+  return (
+    <div className="flex h-screen bg-stone-100">
+      <Sidebar
+        activeView={activeView}
+        setActiveView={setActiveView}
+        isCollapsed={isSidebarCollapsed}
+        setIsCollapsed={setIsSidebarCollapsed}
+      />
+      <main className="flex-1 p-8 overflow-y-auto">
+        {renderView()}
+      </main>
+    </div>
+  );
+};
+
+const AppWrapper = () => (
+  <AuthProvider>
+    <AppContent />
+  </AuthProvider>
+);
+
+export default AppWrapper;

components/AnalysisDisplay.tsx

@@ -0,0 +1,481 @@
+
+
+import React, { useState } from 'react';
+import type { BonsaiAnalysis, ToolRecommendation } from '../types';
+import {
+    CheckCircleIcon, AlertTriangleIcon, SparklesIcon, ZapIcon, BookOpenIcon,
+    ClipboardListIcon, ScissorsIcon, SunIcon, DropletIcon, ThermometerIcon,
+    CalendarIcon, BonsaiIcon, LayersIcon, FlaskConicalIcon, GalleryVerticalEndIcon,
+    WindIcon, SnowflakeIcon, SunriseIcon, LeafIcon, StethoscopeIcon, BugIcon, WrenchIcon,
+    BookUserIcon, PaletteIcon, DownloadIcon
+} from './icons';
+import Spinner from './Spinner';
+import { generateBonsaiImage } from '../services/geminiService';
+
+type Tab = 'Overview' | 'Care Plan' | 'Health and Pests' | 'Styling' | 'Fertilizer and Soil' | 'Seasonal Guide' | 'Diagnostics' | 'Pest Library' | 'Tools & Supplies' | 'Knowledge';
+
+interface AnalysisDisplayProps {
+  analysis: BonsaiAnalysis;
+  onReset?: () => void;
+  onSaveToDiary?: () => void;
+  isReadonly?: boolean;
+  treeImageBase64?: string;
+}
+
+const TABS: { name: Tab, icon: React.FC<React.SVGProps<SVGSVGElement>> }[] = [
+    { name: 'Overview', icon: CheckCircleIcon },
+    { name: 'Care Plan', icon: CalendarIcon },
+    { name: 'Diagnostics', icon: StethoscopeIcon },
+    { name: 'Health and Pests', icon: AlertTriangleIcon },
+    { name: 'Pest Library', icon: BugIcon },
+    { name: 'Styling', icon: ScissorsIcon },
+    { name: 'Fertilizer and Soil', icon: LayersIcon },
+    { name: 'Seasonal Guide', icon: LeafIcon },
+    { name: 'Tools & Supplies', icon: WrenchIcon },
+    { name: 'Knowledge', icon: BookOpenIcon },
+];
+
+const InfoCard: React.FC<{ title: string; children: React.ReactNode; icon: React.ReactNode; className?: string }> = ({ title, children, icon, className = '' }) => (
+    <div className={`bg-white rounded-xl shadow-md border border-stone-200 p-6 ${className}`}>
+        <div className="flex items-center gap-3 mb-4">
+            {icon}
+            <h3 className="text-xl font-semibold text-stone-800">{title}</h3>
+        </div>
+        <div className="space-y-3 text-stone-600">
+            {children}
+        </div>
+    </div>
+);
+
+const HealthGauge: React.FC<{ score: number }> = ({ score }) => {
+    const circumference = 2 * Math.PI * 52;
+    const offset = circumference - (score / 100) * circumference;
+    const color = score > 80 ? 'text-green-600' : score > 50 ? 'text-yellow-500' : 'text-red-600';
+
+    return (
+        <div className="relative w-32 h-32 flex items-center justify-center">
+            <svg className="absolute w-full h-full transform -rotate-90">
+                <circle className="text-stone-200" strokeWidth="10" stroke="currentColor" fill="transparent" r="52" cx="64" cy="64" />
+                <circle className={color} strokeWidth="10" strokeDasharray={circumference} strokeDashoffset={offset}
+                        strokeLinecap="round" stroke="currentColor" fill="transparent" r="52" cx="64" cy="64" />
+            </svg>
+            <span className={`text-3xl font-bold ${color}`}>{score}</span>
+        </div>
+    );
+};
+
+const TabButton: React.FC<{ name: Tab, icon: React.ReactNode, isActive: boolean, onClick: () => void }> = ({ name, icon, isActive, onClick }) => (
+    <button
+        onClick={onClick}
+        className={`flex-shrink-0 flex items-center justify-center sm:justify-start gap-2 px-4 py-3 text-sm font-medium rounded-t-lg border-b-2 transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2
+        ${isActive
+            ? 'border-green-600 text-green-700 bg-white'
+            : 'border-transparent text-stone-500 hover:text-green-600 hover:bg-stone-100'
+        }`}
+    >
+        {icon}
+        <span className="hidden sm:inline">{name}</span>
+    </button>
+);
+
+const PotVisualizerModal: React.FC<{
+    isOpen: boolean;
+    onClose: () => void;
+    analysis: BonsaiAnalysis;
+}> = ({ isOpen, onClose, analysis }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [generatedImage, setGeneratedImage] = useState<string | null>(null);
+    const [error, setError] = useState('');
+    const [promptUsed, setPromptUsed] = useState('');
+
+    const potStyles = [
+        "A shallow, rectangular, unglazed, dark brown ceramic pot.",
+        "A round, blue-glazed ceramic pot with a soft patina.",
+        "An oval, cream-colored pot with delicate feet.",
+        "A modern, minimalist, square, grey concrete pot.",
+        "A classic, hexagonal, deep red pot.",
+        "A natural-looking pot carved from rock with rough texture."
+    ];
+
+    const handleGenerate = async (potStyle: string) => {
+        setIsLoading(true);
+        setError('');
+        setGeneratedImage(null);
+        
+        const treeDescription = `A photorealistic image of a healthy ${analysis.species} bonsai tree. ${analysis.healthAssessment.observations.join(' ')}. The trunk is ${analysis.healthAssessment.trunkAndNebariHealth.toLowerCase()}.`;
+        const fullPrompt = `${treeDescription} The tree is in ${potStyle}`;
+        setPromptUsed(fullPrompt);
+
+        const result = await generateBonsaiImage(fullPrompt);
+        if (result) {
+            setGeneratedImage(result);
+        } else {
+            setError("Sorry, the AI couldn't generate the image. Please try a different style.");
+        }
+        setIsLoading(false);
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60" onClick={onClose}>
+            <div className="bg-white rounded-2xl shadow-xl w-full max-w-2xl m-4 p-6 relative" onClick={e => e.stopPropagation()}>
+                <h3 className="text-2xl font-bold text-stone-900 mb-4">AI Pot Visualizer</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <h4 className="font-semibold text-stone-800 mb-2">Choose a Pot Style:</h4>
+                        <div className="space-y-2">
+                            {potStyles.map(style => (
+                                <button key={style} onClick={() => handleGenerate(style)} disabled={isLoading} className="w-full text-left p-3 bg-stone-100 hover:bg-green-100 hover:text-green-800 rounded-lg text-sm transition-colors disabled:opacity-50">
+                                    {style}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+                    <div className="flex flex-col items-center justify-center bg-stone-100 rounded-lg p-4 min-h-[256px]">
+                        {isLoading ? <Spinner text="Yuki is at the potter's wheel..." /> :
+                         generatedImage ? (
+                            <div className="space-y-2 text-center">
+                                <img src={`data:image/jpeg;base64,${generatedImage}`} alt="Generated bonsai" className="rounded-lg shadow-md"/>
+                                <a href={`data:image/jpeg;base64,${generatedImage}`} download="bonsai-pot-visualization.jpg" className="inline-flex items-center gap-2 text-xs text-green-700 hover:underline">
+                                    <DownloadIcon className="w-4 h-4" />
+                                    Download Image
+                                </a>
+                            </div>
+                         ) : 
+                         error ? <p className="text-red-600 text-center">{error}</p> : <p className="text-stone-500 text-center">Your generated image will appear here.</p>
+                        }
+                    </div>
+                </div>
+                <button onClick={onClose} className="mt-6 w-full bg-stone-200 text-stone-700 font-semibold py-2 px-4 rounded-lg hover:bg-stone-300 transition-colors">
+                    Close
+                </button>
+            </div>
+        </div>
+    );
+};
+
+
+const AnalysisDisplay: React.FC<AnalysisDisplayProps> = ({ analysis, onReset, onSaveToDiary, isReadonly = false, treeImageBase64 }) => {
+    const [activeTab, setActiveTab] = useState<Tab>('Overview');
+    const [isPotVisualizerOpen, setPotVisualizerOpen] = useState(false);
+
+    const { 
+        healthAssessment, careSchedule, pestAndDiseaseAlerts, stylingSuggestions, 
+        environmentalFactors, estimatedAge, species, wateringAnalysis, knowledgeNuggets,
+        fertilizerRecommendations, soilRecipe, potSuggestion, seasonalGuide,
+        diagnostics, pestLibrary, toolRecommendations
+    } = analysis;
+    
+    const seasonIcons: { [key: string]: React.FC<React.SVGProps<SVGSVGElement>> } = {
+        Spring: SunriseIcon,
+        Summer: SunIcon,
+        Autumn: WindIcon,
+        Winter: SnowflakeIcon,
+    };
+
+    const renderContent = () => {
+        switch (activeTab) {
+            case 'Overview':
+                return (
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                        <InfoCard title="At a Glance" icon={<BonsaiIcon className="w-7 h-7 text-green-700" />} className="lg:col-span-1 flex flex-col items-center text-center">
+                            <HealthGauge score={healthAssessment.healthScore} />
+                            <p className="text-lg font-medium mt-4"><strong className="text-stone-900">Overall Health:</strong> {healthAssessment.overallHealth}</p>
+                            <p><strong className="text-stone-900">Species:</strong> {species}</p>
+                            <p><strong className="text-stone-900">Estimated Age:</strong> {estimatedAge}</p>
+                        </InfoCard>
+                        <InfoCard title="Key Observations" icon={<CheckCircleIcon className="w-7 h-7 text-green-600" />} className="lg:col-span-2">
+                            <ul className="list-disc list-inside space-y-2">
+                                {healthAssessment.observations.map((obs, i) => <li key={i}>{obs}</li>)}
+                            </ul>
+                        </InfoCard>
+                        <InfoCard title="Ideal Environment" icon={<SunIcon className="w-7 h-7 text-yellow-500" />} className="lg:col-span-3 grid grid-cols-1 md:grid-cols-3 gap-4">
+                             <div className="flex items-center gap-3">
+                                <SunIcon className="w-8 h-8 text-yellow-500"/>
+                                <div><strong className="block text-stone-800">Light</strong>{environmentalFactors.idealLight}</div>
+                             </div>
+                             <div className="flex items-center gap-3">
+                                <DropletIcon className="w-8 h-8 text-blue-500"/>
+                                <div><strong className="block text-stone-800">Humidity</strong>{environmentalFactors.idealHumidity}</div>
+                             </div>
+                             <div className="flex items-center gap-3">
+                                <ThermometerIcon className="w-8 h-8 text-red-500"/>
+                                <div><strong className="block text-stone-800">Temperature</strong>{environmentalFactors.temperatureRange}</div>
+                             </div>
+                        </InfoCard>
+                    </div>
+                );
+            case 'Care Plan':
+                return (
+                    <div className="space-y-6">
+                        <InfoCard title="Watering Analysis" icon={<DropletIcon className="w-7 h-7 text-blue-500" />}>
+                            <p><strong className="text-stone-900">Frequency:</strong> {wateringAnalysis.frequency}</p>
+                            <p><strong className="text-stone-900">Method:</strong> {wateringAnalysis.method}</p>
+                            <p><strong className="text-stone-900">Notes:</strong> {wateringAnalysis.notes}</p>
+                        </InfoCard>
+                        <div>
+                            <h3 className="text-2xl font-semibold text-stone-800 text-center mb-6">4-Week Personalized Care Schedule</h3>
+                            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+                                {careSchedule.sort((a,b) => a.week - b.week).map((item, i) => (
+                                    <div key={i} className="bg-white p-5 rounded-lg border border-stone-200 shadow-sm flex flex-col">
+                                        <p className="font-bold text-green-800">Week {item.week}</p>
+                                        <p className="font-semibold text-stone-900 mt-1">{item.task}</p>
+                                        <p className="text-sm text-stone-600 mt-2 flex-grow">{item.details}</p>
+                                        {item.toolsNeeded && item.toolsNeeded.length > 0 && (
+                                            <div className="mt-3 pt-3 border-t border-stone-200">
+                                                <h4 className="text-xs font-bold text-stone-500 uppercase">Tools</h4>
+                                                <div className="flex flex-wrap gap-2 mt-1">
+                                                     {item.toolsNeeded.map(tool => <span key={tool} className="text-xs bg-stone-100 text-stone-700 px-2 py-1 rounded-full">{tool}</span>)}
+                                                </div>
+                                            </div>
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                );
+            case 'Diagnostics':
+                return (
+                    <InfoCard title="Advanced Diagnostics" icon={<StethoscopeIcon className="w-7 h-7 text-blue-700" />}>
+                        <div className="space-y-4">
+                            {diagnostics.map((diag, i) => (
+                                <div key={i} className="p-4 bg-stone-50 rounded-lg border border-stone-200">
+                                    <div className="flex justify-between items-baseline">
+                                        <h4 className="font-semibold text-stone-800">{diag.issue}</h4>
+                                        <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${diag.confidence === 'High' ? 'bg-red-100 text-red-800' : diag.confidence === 'Medium' ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800'}`}>{diag.confidence} Confidence</span>
+                                    </div>
+                                    <p className="mt-2"><strong className="font-medium text-stone-700">Symptoms to watch for:</strong> {diag.symptoms}</p>
+                                    <p className="mt-1"><strong className="font-medium text-stone-700">Solution/Prevention:</strong> {diag.solution}</p>
+                                </div>
+                            ))}
+                        </div>
+                    </InfoCard>
+                );
+            case 'Health and Pests':
+                return (
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                         <InfoCard title="Active Pest & Disease Alerts" icon={<AlertTriangleIcon className="w-7 h-7 text-amber-600" />}>
+                            {pestAndDiseaseAlerts.length > 0 ? (
+                                pestAndDiseaseAlerts.map((alert, i) => (
+                                    <div key={i} className="py-2 border-b border-stone-200 last:border-b-0">
+                                        <div className="flex justify-between items-baseline">
+                                            <p className="font-semibold text-stone-800">{alert.pestOrDisease}</p>
+                                            <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${alert.severity === 'High' ? 'bg-red-100 text-red-800' : alert.severity === 'Medium' ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800'}`}>{alert.severity}</span>
+                                        </div>
+                                        <p><strong className="font-medium">Symptoms:</strong> {alert.symptoms}</p>
+                                        <p><strong className="font-medium">Treatment:</strong> {alert.treatment}</p>
+                                    </div>
+                                ))
+                            ) : <p>No active threats detected. Check the 'Pest Library' tab for preventative knowledge on common threats in your area.</p>}
+                        </InfoCard>
+                         <InfoCard title="Detailed Health Breakdown" icon={<CheckCircleIcon className="w-7 h-7 text-green-600" />}>
+                            <p><strong className="font-medium text-stone-900">Foliage:</strong> {healthAssessment.foliageHealth}</p>
+                            <p><strong className="font-medium text-stone-900">Trunk & Nebari:</strong> {healthAssessment.trunkAndNebariHealth}</p>
+                            <p><strong className="font-medium text-stone-900">Pot & Soil:</strong> {healthAssessment.potAndSoilHealth}</p>
+                        </InfoCard>
+                    </div>
+                );
+             case 'Pest Library':
+                return (
+                    <InfoCard title="Regional Pest & Disease Library" icon={<BugIcon className="w-7 h-7 text-red-700" />}>
+                        <p className="text-sm mb-4">A reference for the most common threats to a {species} in your region.</p>
+                        <div className="space-y-4">
+                            {pestLibrary.map((pest, i) => (
+                                <details key={i} className="p-4 bg-stone-50 rounded-lg border border-stone-200 group">
+                                    <summary className="font-semibold text-stone-800 cursor-pointer flex justify-between items-center">
+                                       {pest.name} ({pest.type})
+                                       <span className="text-xs text-stone-500 group-open:hidden">Show Details</span>
+                                       <span className="text-xs text-stone-500 hidden group-open:inline">Hide Details</span>
+                                    </summary>
+                                    <div className="mt-4 space-y-3 text-sm">
+                                        <p>{pest.description}</p>
+                                        <div>
+                                            <strong className="font-medium text-stone-700">Symptoms:</strong>
+                                            <ul className="list-disc list-inside ml-2">
+                                                {pest.symptoms.map((s, idx) => <li key={idx}>{s}</li>)}
+                                            </ul>
+                                        </div>
+                                        <div>
+                                            <strong className="font-medium text-stone-700">Organic Treatment:</strong>
+                                            <p>{pest.treatment.organic}</p>
+                                        </div>
+                                         <div>
+                                            <strong className="font-medium text-stone-700">Chemical Treatment:</strong>
+                                            <p>{pest.treatment.chemical}</p>
+                                        </div>
+                                    </div>
+                                </details>
+                            ))}
+                        </div>
+                    </InfoCard>
+                );
+            case 'Styling':
+                return (
+                     <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                        <InfoCard title="Styling & Shaping Advice" icon={<ScissorsIcon className="w-7 h-7 text-indigo-600" />} className="lg:col-span-1">
+                            {stylingSuggestions.length > 0 ? (
+                                stylingSuggestions.map((suggestion, i) => (
+                                    <div key={i} className="py-3 border-b border-stone-200 last:border-b-0">
+                                        <p className="font-semibold text-stone-800">{suggestion.technique} ({suggestion.area})</p>
+                                        <p className="mt-1">{suggestion.description}</p>
+                                    </div>
+                                ))
+                            ) : <p>No immediate styling is recommended. Focus on health first.</p>}
+                        </InfoCard>
+                         <InfoCard title="Pot Recommendation" icon={<GalleryVerticalEndIcon className="w-7 h-7 text-orange-700" />} className="lg:col-span-1">
+                            <p><strong className="font-medium text-stone-900">Style:</strong> {potSuggestion.style}</p>
+                            <p><strong className="font-medium text-stone-900">Size:</strong> {potSuggestion.size}</p>
+                            <p><strong className="font-medium text-stone-900">Color Palette:</strong> {potSuggestion.colorPalette}</p>
+                            <p className="mt-3 pt-3 border-t border-stone-200"><strong className="font-medium text-stone-900">Rationale:</strong> {potSuggestion.rationale}</p>
+                             <button onClick={() => setPotVisualizerOpen(true)} className="mt-4 w-full flex items-center justify-center gap-2 rounded-md bg-orange-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-500">
+                                <PaletteIcon className="w-5 h-5"/>
+                                Visualize Pot Pairings
+                            </button>
+                        </InfoCard>
+                     </div>
+                );
+            case 'Fertilizer and Soil':
+                return (
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                        <InfoCard title="Fertilizer Schedule" icon={<FlaskConicalIcon className="w-7 h-7 text-cyan-600" />}>
+                            {fertilizerRecommendations.map(rec => (
+                                <div key={rec.phase} className="py-2 border-b border-stone-200 last:border-b-0">
+                                    <p className="font-semibold text-stone-800">{rec.phase}</p>
+                                    <p><strong className="font-medium">Type:</strong> {rec.type}</p>
+                                    <p><strong className="font-medium">Frequency:</strong> {rec.frequency}</p>
+                                    <p className="text-sm italic">Notes: {rec.notes}</p>
+                                </div>
+                            ))}
+                        </InfoCard>
+                        <InfoCard title="Recommended Soil Mix" icon={<LayersIcon className="w-7 h-7 text-amber-700" />}>
+                            <div className="space-y-3">
+                                {soilRecipe.components.map(comp => (
+                                    <div key={comp.name}>
+                                        <div className="flex justify-between items-center mb-1">
+                                            <span className="font-medium text-stone-800">{comp.name}</span>
+                                            <span className="font-semibold text-amber-800">{comp.percentage}%</span>
+                                        </div>
+                                        <div className="w-full bg-stone-200 rounded-full h-2.5">
+                                            <div className="bg-amber-600 h-2.5 rounded-full" style={{ width: `${comp.percentage}%` }}></div>
+                                        </div>
+                                         <p className="text-xs italic text-stone-500 mt-1">{comp.notes}</p>
+                                    </div>
+                                ))}
+                            </div>
+                            <p className="mt-4 pt-4 border-t border-stone-200"><strong className="font-medium text-stone-900">Rationale:</strong> {soilRecipe.rationale}</p>
+                        </InfoCard>
+                    </div>
+                );
+            case 'Seasonal Guide':
+                 return (
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        {seasonalGuide.sort((a,b) => ['Spring', 'Summer', 'Autumn', 'Winter'].indexOf(a.season) - ['Spring', 'Summer', 'Autumn', 'Winter'].indexOf(b.season)).map(season => {
+                            const Icon = seasonIcons[season.season] || LeafIcon;
+                             return (
+                                <InfoCard key={season.season} title={season.season} icon={<Icon className="w-7 h-7 text-green-700" />}>
+                                    <p className="italic text-stone-600 mb-4">{season.summary}</p>
+                                    <ul className="space-y-2">
+                                        {season.tasks.map(task => (
+                                            <li key={task.task} className="flex items-center justify-between text-sm">
+                                                <span>{task.task}</span>
+                                                <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${task.importance === 'High' ? 'bg-red-100 text-red-800' : task.importance === 'Medium' ? 'bg-yellow-100 text-yellow-800' : 'bg-blue-100 text-blue-800'}`}>{task.importance}</span>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </InfoCard>
+                            )
+                        })}
+                    </div>
+                );
+             case 'Tools & Supplies':
+                 const groupedTools = toolRecommendations.reduce((acc, tool) => {
+                    acc[tool.category] = acc[tool.category] || [];
+                    acc[tool.category].push(tool);
+                    return acc;
+                 }, {} as Record<ToolRecommendation['category'], ToolRecommendation[]>);
+
+                return (
+                    <div className="space-y-6">
+                        {Object.entries(groupedTools).map(([category, tools]) => (
+                            <InfoCard key={category} title={category} icon={<WrenchIcon className="w-7 h-7 text-gray-700" />}>
+                                <div className="space-y-3">
+                                {tools.map(tool => (
+                                    <div key={tool.name} className="py-2 border-b border-stone-100 last:border-0">
+                                        <div className="flex justify-between items-baseline">
+                                            <p className="font-semibold text-stone-800">{tool.name}</p>
+                                            <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${tool.level === 'Essential' ? 'bg-green-100 text-green-800' : tool.level === 'Recommended' ? 'bg-blue-100 text-blue-800' : 'bg-orange-100 text-orange-800'}`}>{tool.level}</span>
+                                        </div>
+                                        <p className="text-sm">{tool.description}</p>
+                                    </div>
+                                ))}
+                                </div>
+                            </InfoCard>
+                        ))}
+                    </div>
+                );
+            case 'Knowledge':
+                return (
+                    <InfoCard title={`Master's Wisdom: ${species}`} icon={<BookOpenIcon className="w-7 h-7 text-purple-600" />}>
+                        <ul className="space-y-4">
+                            {knowledgeNuggets.map((nugget, i) => (
+                                <li key={i} className="flex items-start gap-3">
+                                    <SparklesIcon className="w-5 h-5 text-yellow-500 mt-1 flex-shrink-0" />
+                                    <span>{nugget}</span>
+                                </li>
+                            ))}
+                        </ul>
+                    </InfoCard>
+                );
+            default:
+                return null;
+        }
+    };
+    
+    return (
+        <div className="w-full max-w-6xl mx-auto space-y-8">
+            <PotVisualizerModal isOpen={isPotVisualizerOpen} onClose={() => setPotVisualizerOpen(false)} analysis={analysis} />
+            <div className="text-center">
+                <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl">Your Bonsai Analysis is Ready</h2>
+                <p className="mt-4 text-lg leading-8 text-stone-600">
+                    Master Yuki has assessed your <span className="font-semibold text-green-700">{species}</span>. Here is your report.
+                </p>
+            </div>
+
+            <div className="bg-stone-50 rounded-xl p-1 sm:p-2 sticky top-2 z-20 shadow-sm border border-stone-200">
+                <div className="flex flex-nowrap items-center justify-start -mb-px border-b border-stone-200 overflow-x-auto">
+                    {TABS.map(({name, icon: Icon}) => (
+                         <TabButton key={name} name={name} icon={<Icon className="w-5 h-5" />} isActive={activeTab === name} onClick={() => setActiveTab(name)} />
+                    ))}
+                </div>
+            </div>
+            
+            <div className="bg-stone-100 p-4 sm:p-6 lg:p-8 rounded-2xl">
+                {renderContent()}
+            </div>
+
+            {!isReadonly && (
+                <div className="text-center pt-6 flex flex-col sm:flex-row justify-center items-center gap-4">
+                    <button
+                        onClick={onReset}
+                        className="w-full sm:w-auto bg-stone-200 text-stone-700 font-semibold py-3 px-6 rounded-lg hover:bg-stone-300 transition-colors"
+                    >
+                        Analyze Another Tree
+                    </button>
+                    {onSaveToDiary && (
+                         <button
+                            onClick={onSaveToDiary}
+                            className="flex items-center gap-2 w-full sm:w-auto justify-center rounded-md bg-green-700 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-green-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-700"
+                        >
+                            <BookUserIcon className="w-5 h-5"/>
+                            Save Tree to My Garden
+                        </button>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default AnalysisDisplay;

components/ImageUploader.tsx

@@ -0,0 +1,161 @@
+
+
+
+import React, { useState, useRef, useEffect } from 'react';
+import { UploadCloudIcon, SparklesIcon } from './icons';
+
+interface ImageUploaderProps {
+  onAnalyze: (imageBase64: string, species: string, location: string) => void;
+  isAnalyzing: boolean;
+  defaultSpecies?: string;
+  defaultLocation?: string;
+  disabled?: boolean;
+}
+
+const ImageUploader: React.FC<ImageUploaderProps> = ({ onAnalyze, isAnalyzing, defaultSpecies = '', defaultLocation = '', disabled = false }) => {
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [imageBase64, setImageBase64] = useState<string>('');
+  const [species, setSpecies] = useState<string>(defaultSpecies);
+  const [location, setLocation] = useState<string>(defaultLocation);
+  const [error, setError] = useState<string>('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setSpecies(defaultSpecies);
+    setLocation(defaultLocation);
+  }, [defaultSpecies, defaultLocation]);
+
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      if (file.size > 4 * 1024 * 1024) { // 4MB limit
+          setError("File size exceeds 4MB. Please upload a smaller image.");
+          return;
+      }
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const base64String = (reader.result as string).split(',')[1];
+        setImagePreview(reader.result as string);
+        setImageBase64(base64String);
+        setError('');
+      };
+      reader.onerror = () => {
+        setError("Failed to read the file.");
+      }
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleAnalyzeClick = () => {
+    if (!imageBase64) {
+      setError('Please upload an image of your bonsai.');
+      return;
+    }
+    if (!species.trim()) {
+      setError('Please enter the bonsai species.');
+      return;
+    }
+    if (!location.trim()) {
+      setError('Please enter your city or region for climate data.');
+      return;
+    }
+    setError('');
+    onAnalyze(imageBase64, species, location);
+  };
+
+  const triggerFileSelect = () => fileInputRef.current?.click();
+
+  return (
+    <div className="w-full max-w-2xl mx-auto bg-white p-8 rounded-2xl shadow-lg border border-stone-200">
+      <div className="space-y-6">
+        <div>
+          <h2 className="text-lg font-medium text-stone-900">Provide Tree Details</h2>
+          <p className="mt-1 text-sm text-stone-600">
+            Upload a clear photo and tell us about your tree for the most accurate AI analysis.
+          </p>
+        </div>
+
+        <div
+          className="mt-2 flex justify-center rounded-lg border-2 border-dashed border-stone-300 px-6 py-10 hover:border-green-600 transition-colors cursor-pointer"
+          onClick={triggerFileSelect}
+          onDragOver={(e) => e.preventDefault()}
+          onDrop={(e) => {
+             e.preventDefault();
+             if (e.dataTransfer.files) {
+                 const mockEvent = { target: { files: e.dataTransfer.files } } as unknown as React.ChangeEvent<HTMLInputElement>;
+                 handleFileChange(mockEvent);
+             }
+          }}
+        >
+          <div className="text-center">
+            {imagePreview ? (
+              <img src={imagePreview} alt="Bonsai preview" className="mx-auto h-40 w-auto rounded-md object-cover" />
+            ) : (
+              <>
+                <UploadCloudIcon className="mx-auto h-12 w-12 text-stone-400" aria-hidden="true" />
+                <div className="mt-4 flex text-sm leading-6 text-stone-600">
+                  <span className="relative font-semibold text-green-700 focus-within:outline-none focus-within:ring-2 focus-within:ring-green-600 focus-within:ring-offset-2 hover:text-green-500">
+                    Upload a file
+                  </span>
+                  <input ref={fileInputRef} id="file-upload" name="file-upload" type="file" className="sr-only" onChange={handleFileChange} accept="image/png, image/jpeg" />
+                  <p className="pl-1">or drag and drop</p>
+                </div>
+                <p className="text-xs leading-5 text-stone-500">PNG, JPG up to 4MB</p>
+              </>
+            )}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-2">
+          <div>
+            <label htmlFor="species" className="block text-sm font-medium leading-6 text-stone-900">
+              Bonsai Species
+            </label>
+            <div className="mt-2">
+              <input
+                type="text"
+                name="species"
+                id="species"
+                value={species}
+                onChange={(e) => setSpecies(e.target.value)}
+                className="block w-full rounded-md border-0 py-2 px-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-green-600 sm:text-sm sm:leading-6"
+                placeholder="e.g., Japanese Maple, Ficus"
+              />
+            </div>
+          </div>
+          <div>
+            <label htmlFor="location" className="block text-sm font-medium leading-6 text-stone-900">
+              Your Location (City/Region)
+            </label>
+            <div className="mt-2">
+              <input
+                type="text"
+                name="location"
+                id="location"
+                value={location}
+                onChange={(e) => setLocation(e.target.value)}
+                className="block w-full rounded-md border-0 py-2 px-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-green-600 sm:text-sm sm:leading-6"
+                placeholder="e.g., San Francisco, CA"
+              />
+            </div>
+          </div>
+        </div>
+        {error && <p className="text-sm text-red-600">{error}</p>}
+        <div className="mt-6">
+          <button
+            type="button"
+            onClick={handleAnalyzeClick}
+            disabled={isAnalyzing || disabled}
+            className="w-full flex items-center justify-center gap-2 rounded-md bg-green-700 px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-green-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-700 disabled:bg-stone-400 disabled:cursor-not-allowed"
+          >
+            <SparklesIcon className="-ml-0.5 h-5 w-5" aria-hidden="true" />
+            {isAnalyzing ? 'Analyzing...' : 'Get AI Analysis'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImageUploader;

components/Sidebar.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import type { View } from '../types';
+import {
+  BonsaiIcon,
+  SparklesIcon,
+  BugIcon,
+  LeafIcon,
+  WrenchIcon,
+  BookUserIcon,
+  StethoscopeIcon,
+  PaletteIcon,
+  ScanIcon,
+  SnailIcon,
+  FilterIcon,
+  RootsIcon,
+  PotRulerIcon,
+  SunClockIcon,
+  BeakerIcon,
+  ShovelIcon,
+  UmbrellaIcon,
+  ScissorsIcon,
+  SettingsIcon,
+  ChevronsLeftIcon
+} from './icons';
+import { AuthContext } from '../context/AuthContext';
+
+
+interface SidebarProps {
+  activeView: View;
+  setActiveView: (view: View) => void;
+  isCollapsed: boolean;
+  setIsCollapsed: (isCollapsed: boolean) => void;
+}
+
+const CATEGORIZED_NAV_ITEMS = [
+    {
+        category: 'Core',
+        items: [
+            { id: 'garden', name: 'My Garden', icon: BookUserIcon },
+            { id: 'steward', name: 'New Tree Analysis', icon: SparklesIcon },
+        ]
+    },
+    {
+        category: 'AI Studios',
+        items: [
+            { id: 'designStudio', name: 'AI Design Studio', icon: PaletteIcon },
+            { id: 'wiringGuide', name: 'AI Wiring Guide', icon: SnailIcon },
+            { id: 'nebariDeveloper', name: 'Nebari Developer', icon: RootsIcon },
+            // { id: 'virtualTrimmer', name: 'Virtual Trimmer', icon: ScissorsIcon },
+        ]
+    },
+    {
+        category: 'Diagnostics',
+        items: [
+            { id: 'healthCheck', name: 'Health Check-up', icon: StethoscopeIcon },
+            { id: 'speciesIdentifier', name: 'Species Identifier', icon: ScanIcon },
+            { id: 'soilAnalyzer', name: 'Soil Analyzer', icon: FilterIcon },
+            { id: 'weatherShield', name: 'Weather Shield', icon: UmbrellaIcon },
+        ]
+    },
+    {
+        category: 'Utilities',
+        items: [
+            { id: 'sunTracker', name: 'Sun Tracker', icon: SunClockIcon },
+            { id: 'potCalculator', name: 'Pot Calculator', icon: PotRulerIcon },
+            { id: 'fertilizerMixer', name: 'Fertilizer Mixer', icon: BeakerIcon },
+            { id: 'soilVolumeCalculator', name: 'Soil Mix Calculator', icon: ShovelIcon },
+            { id: 'tools', name: 'Tool Guide', icon: WrenchIcon },
+        ]
+    },
+    {
+        category: 'Reference',
+        items: [
+            { id: 'pests', name: 'Pest Library', icon: BugIcon },
+            { id: 'seasons', name: 'Seasonal Guides', icon: LeafIcon },
+        ]
+    },
+];
+
+
+const Sidebar: React.FC<SidebarProps> = ({ activeView, setActiveView, isCollapsed, setIsCollapsed }) => {
+  const { logout } = React.useContext(AuthContext);
+
+  return (
+    <aside className={`flex-shrink-0 bg-white border-r border-stone-200 flex flex-col transition-all duration-300 ${isCollapsed ? 'w-20' : 'w-64'}`}>
+      <div className={`h-16 flex items-center border-b border-stone-200 transition-all duration-300 ${isCollapsed ? 'justify-center' : 'justify-center px-4'}`}>
+        <div className="flex items-center gap-2">
+          <BonsaiIcon className="h-8 w-8 text-green-700 flex-shrink-0" />
+          {!isCollapsed && <h1 className="text-xl font-bold text-stone-800">Yuki</h1>}
+        </div>
+      </div>
+      <nav className="flex-1 px-2 py-4 space-y-2 overflow-y-auto">
+        {CATEGORIZED_NAV_ITEMS.map((category) => (
+          <div key={category.category}>
+            {!isCollapsed && <h2 className="px-4 text-xs font-bold uppercase text-stone-500 tracking-wider">{category.category}</h2>}
+            {isCollapsed && category.category === 'Core' && <div className="h-px bg-stone-200 my-2 mx-4"></div>}
+            <div className="mt-2 space-y-1">
+              {category.items.map((item) => (
+                <button
+                  key={item.id}
+                  onClick={() => setActiveView(item.id as View)}
+                  title={item.name}
+                  className={`w-full flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors ${isCollapsed ? 'justify-center' : ''}
+                    ${
+                      activeView === item.id
+                        ? 'bg-green-100 text-green-800'
+                        : 'text-stone-600 hover:bg-stone-100 hover:text-stone-900'
+                    }
+                  `}
+                >
+                  <item.icon className="h-5 w-5 flex-shrink-0" />
+                  {!isCollapsed && <span>{item.name}</span>}
+                </button>
+              ))}
+            </div>
+          </div>
+        ))}
+      </nav>
+      <div className="flex-shrink-0 p-2 border-t border-stone-200">
+         <button
+            key="settings"
+            onClick={() => setActiveView('settings')}
+            title="Settings"
+            className={`w-full flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors ${isCollapsed ? 'justify-center' : ''}
+              ${
+                activeView === 'settings'
+                  ? 'bg-green-100 text-green-800'
+                  : 'text-stone-600 hover:bg-stone-100 hover:text-stone-900'
+              }
+            `}
+          >
+            <SettingsIcon className="h-5 w-5 flex-shrink-0" />
+            {!isCollapsed && <span>Settings</span>}
+          </button>
+        <div className="p-2 border-t border-stone-200 mt-2">
+            <button 
+                onClick={() => setIsCollapsed(!isCollapsed)} 
+                className={`w-full flex items-center gap-3 px-4 py-2 text-sm font-medium text-stone-600 hover:bg-stone-100 rounded-lg ${isCollapsed ? 'justify-center' : ''}`}
+                title={isCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar'}
+            >
+                <ChevronsLeftIcon className={`h-5 w-5 flex-shrink-0 transition-transform duration-300 ${isCollapsed ? 'rotate-180' : ''}`} />
+                {!isCollapsed && <span>Collapse</span>}
+            </button>
+        </div>
+      </div>
+    </aside>
+  );
+};
+
+export default Sidebar;

components/Spinner.tsx

@@ -0,0 +1,28 @@
+
+import React from 'react';
+import { BonsaiIcon } from './icons';
+
+interface SpinnerProps {
+    text?: string;
+}
+
+const Spinner: React.FC<SpinnerProps> = ({ text = "Yuki the Bonsai Sensei is analyzing your tree..." }) => {
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 text-center p-8">
+      <BonsaiIcon className="h-12 w-12 text-green-700 animate-pulse" />
+      <p className="text-lg font-medium text-stone-600">{text}</p>
+      <div className="w-48 h-2 bg-stone-200 rounded-full overflow-hidden">
+          <div className="h-full bg-green-600 rounded-full animate-[progress_2s_ease-in-out_infinite]"></div>
+      </div>
+      <style>{`
+        @keyframes progress {
+            0% { width: 0%; }
+            50% { width: 100%; }
+            100% { width: 0%; }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Spinner;

components/UserProfile.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const UserProfile: React.FC = () => {
+    // This component is no longer used in the anonymous auth model.
+    // Returning null to prevent it from rendering.
+    return null;
+};
+
+export default UserProfile;

components/icons.tsx

@@ -0,0 +1,334 @@
+
+
+import type React from 'react';
+
+export const BonsaiIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M14 15v-3a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v3" />
+    <path d="M14 15H8" />
+    <path d="M17.5 15.5c2.3-1.4 3.5-4 3.5-6.5a8 8 0 0 0-16 0c0 2.5 1.2 5.1 3.5 6.5" />
+    <path d="M6 18h12" />
+  </svg>
+);
+
+export const UploadCloudIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
+    <path d="M12 12v9" />
+    <path d="m16 16-4-4-4 4" />
+  </svg>
+);
+
+export const SparklesIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M9.93 2.65a2.5 2.5 0 0 1 4.14 0" />
+    <path d="M8.2 6.4a2.5 2.5 0 0 1 4.14 0" />
+    <path d="m18.07 10.5-1.14 1.14" />
+    <path d="M6.07 10.5 5 11.64" />
+    <path d="M12 2v2.5" />
+    <path d="M12 20v2" />
+    <path d="M21.17 8.83 19 11" />
+    <path d="M5.17 8.83 3 11" />
+    <path d="M12 12a7.5 7.5 0 0 0-7.5 7.5c0 2.5 4 2.5 7.5 0s7.5-2.5 7.5 0c0-4.14-3.36-7.5-7.5-7.5Z" />
+    <path d="m13.5 12 .5-1.5" />
+  </svg>
+);
+
+export const CheckCircleIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
+      <path d="m9 12 2 2 4-4" />
+    </svg>
+);
+
+export const AlertTriangleIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
+      <path d="M12 9v4" />
+      <path d="M12 17h.01" />
+    </svg>
+);
+
+export const ZapIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+  </svg>
+);
+
+export const BookOpenIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
+);
+
+export const ClipboardListIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg>
+);
+
+export const ScissorsIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><line x1="20" x2="8.12" y1="4" y2="15.88"/><line x1="14.47" x2="20" y1="14.48" y2="20"/><line x1="8.12" x2="12" y1="8.12" y2="12"/></svg>
+);
+
+export const SunIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m4.93 19.07 1.41-1.41"/><path d="m17.66 6.34 1.41-1.41"/></svg>
+);
+
+export const DropletIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C5 11.1 4 13 4 15a7 7 0 0 0 7 7z"/></svg>
+);
+
+export const ThermometerIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z"/></svg>
+);
+
+export const CalendarIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>
+);
+
+export const LayersIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
+);
+
+export const FlaskConicalIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 2v7.31"/><path d="M14 9.31V2"/><path d="M3 14a6.99 6.99 0 0 1 .15-1.39l.8-4.02A2 2 0 0 1 6 7h12a2 2 0 0 1 2.05 1.61l.8 4.02A6.99 6.99 0 0 1 21 14v1a2 2 0 0 1-2 2h-6.23a2 2 0 0 1-1.54-.78L10 15H4a2 2 0 0 1-2-2v-1Z"/></svg>
+);
+
+export const GalleryVerticalEndIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 2h10"/><rect width="18" height="12" x="3" y="6" rx="2"/><path d="M7 22h10"/></svg>
+);
+
+export const WindIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2"/><path d="M9.6 4.6A2 2 0 1 1 11 8H2"/><path d="M12.6 19.4A2 2 0 1 0 14 16H2"/></svg>
+);
+
+export const SnowflakeIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="2" x2="22" y1="12" y2="12"/><line x1="12" x2="12" y1="2" y2="22"/><path d="m20 16-4-4 4-4"/><path d="m4 8 4 4-4 4"/><path d="m16 4-4 4-4-4"/><path d="m8 20 4-4 4 4"/></svg>
+);
+
+export const SunriseIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v8"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m8 6 4-4 4 4"/><path d="M16 18a4 4 0 0 0-8 0"/></svg>
+);
+
+export const LeafIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 20A7 7 0 0 1 4 13q0-4.5 4.5-5A7 7 0 0 1 11 20"/><path d="M17 8a4 4 0 0 0-4-4h-2"/></svg>
+);
+
+export const StethoscopeIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4.8 2.3A.3.3 0 1 0 5 2H4a2 2 0 0 0-2 2v5a6 6 0 0 0 6 6v0a6 6 0 0 0 6-6V4a2 2 0 0 0-2-2h-1a.2.2 0 1 0 .3.3"/><path d="M8 15v1a6 6 0 0 0 6 6v0a6 6 0 0 0 6-6v-4"/><circle cx="20" cy="10" r="2"/></svg>
+);
+
+export const BugIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m8 2 1.88 1.88"/><path d="M14.12 3.88 16 2"/><path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"/><path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"/><path d="M12 20v-4"/><path d="M4 13H2"/><path d="M22 13h-2"/><path d="m6 10 1-2"/><path d="m17 8 1 2"/></svg>
+);
+
+export const WrenchIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
+);
+
+export const LayoutDashboardIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
+);
+
+export const BookUserIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v16H6.5a2.5 2.5 0 0 1 0-5H20"/><circle cx="12" cy="8" r="2"/><path d="M15 13a3 3 0 1 0-6 0"/></svg>
+);
+
+export const ToolboxIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 12h-4"/><path d="M2 12h2"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="M15 6.34V2.05a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2.05v4.29"/><path d="M18.66 9H5.34a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h13.32a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2z"/></svg>
+);
+
+export const PlusCircleIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="16"/><line x1="8" x2="16" y1="12" y2="12"/></svg>
+);
+
+export const Trash2Icon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
+);
+
+export const InfoIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+);
+
+export const ArrowLeftIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
+);
+
+export const HistoryIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/></svg>
+);
+
+export const ImagePlusIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><line x1="16" x2="22" y1="5" y2="5"/><line x1="19" x2="19" y1="2" y2="8"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
+);
+
+export const GalleryHorizontalIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 7v10"/><path d="M6 5v14"/><rect width="12" height="18" x="10" y="3" rx="2"/><path d="M22 7v10"/></svg>
+);
+
+export const CameraIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>
+);
+
+export const PaletteIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M10.3 2.2c-1.2 1-2 2.5-2.2 4.2"/><path d="m7.4 8-.8 2.5"/><path d="M14.1 2.2c1.2 1 2 2.5 2.2 4.2"/><path d="m16.6 8 .8 2.5"/><path d="M12 22c-3.3 0-6-2.7-6-6 0-1.5.5-2.8 1.4-3.8.3-.4.7-.7.7-1.2 0-.2-.1-.4-.2-.5-.3-.2-.5-.3-.8-.3H6c-.6 0-1 .4-1 1v1c0 1.1-.9 2-2 2H2"/><path d="M12 22c3.3 0 6-2.7 6-6 0-1.5-.5-2.8-1.4-3.8-.3-.4-.7-.7-.7-1.2 0-.2.1-.4.2-.5.3-.2-.5-.3.8-.3h.5c.6 0 1 .4 1 1v1c0 1.1.9 2 2 2h1"/></svg>
+);
+
+export const ScanIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 12a5 5 0 0 1 5-5"/><path d="M12 17a5 5 0 0 0-5-5"/><path d="M17 12a5 5 0 0 0-5 5"/></svg>
+);
+
+export const DownloadIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
+);
+
+export const SnailIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 22c-4-4-4-10-10-10C6 12 6 6 2 2"/><path d="M14 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/></svg>
+);
+
+export const FilterIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
+);
+
+export const RootsIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M6 21V9a9 9 0 0 1 9 9h1"/></svg>
+);
+
+export const PotRulerIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M3 14h18v5H3z"/>
+    <path d="M5 14v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/>
+    <path d="M12 2v2"/>
+    <path d="M12 8v2"/>
+    <path d="M12 14v-2"/>
+    <path d="M5 6H3"/>
+    <path d="M5 12H3"/>
+    <path d="M21 6h-2"/>
+    <path d="M21 12h-2"/>
+  </svg>
+);
+
+export const SunClockIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M12 2v2"/>
+    <path d="m4.93 4.93 1.41 1.41"/>
+    <path d="M20 12h2"/>
+    <path d="m19.07 4.93-1.41 1.41"/>
+    <path d="M12 12a8 8 0 0 0-8 8h16a8 8 0 0 0-8-8z"/>
+    <path d="M12 12v-2"/>
+  </svg>
+);
+
+export const BeakerIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M4.5 3h15"/><path d="M6 3v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V3"/>
+        <path d="M6 14h12"/>
+    </svg>
+);
+
+export const ShovelIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M2 22v-5l5-5"/>
+        <path d="m7 17 5-5"/>
+        <path d="M11 11 9 9"/>
+        <path d="M14 4 6 12"/>
+        <path d="m18 8 6 6"/>
+        <path d="m18 8 4 12 4-4-12-4"/>
+    </svg>
+);
+
+export const UmbrellaIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M22 12a10.06 10.06 1 0 0-20 0Z"/>
+        <path d="M12 12v8a2 2 0 0 0 4 0"/>
+        <path d="M12 2v1"/>
+    </svg>
+);
+
+export const SettingsIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 0 2l-.15.08a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1 0-2l.15-.08a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
+        <circle cx="12" cy="12" r="3"/>
+    </svg>
+);
+
+export const ChevronsLeftIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/>
+    </svg>
+);
+
+export const LogOutIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/>
+    </svg>
+);
+
+export const KeyIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/>
+    </svg>
+);

config.ts

@@ -0,0 +1,13 @@
+// IMPORTANT: This file contains configuration variables.
+
+// --- Ko-fi Configuration ---
+// This is the link to your Ko-fi page where users can purchase the app.
+export const KOFI_PAGE_URL = 'https://ko-fi.com/your_page_here'; 
+
+// These are the secret credentials you will provide to users after they purchase.
+// You should generate a strong, unique password.
+export const KOFI_LOGIN_NAME = 'yuki-bonsai-master';
+export const KOFI_SECRET_PASSWORD = 'a9b8c7d6e5f4a3b2c1d0e9f8a7b6c5d4e3f2a1b0c9d8e7f6a5b4c3d2e1f0a9b8';
+
+// The Google Client ID is no longer used for login but may be kept for other Google service integrations if needed.
+export const GOOGLE_CLIENT_ID = '605727770560-dijtutkchf855kjdqokmvhb6mrum0cm9.apps.googleusercontent.com';

context/AuthContext.tsx

@@ -0,0 +1,111 @@
+import React, { createContext, useState, useEffect, useCallback } from 'react';
+import type { UserProfile } from '../types';
+import { KOFI_LOGIN_NAME, KOFI_SECRET_PASSWORD } from '../config';
+
+// Keys for localStorage
+const CUSTOM_NAME_KEY = 'yuki-app-login-name';
+const CUSTOM_SECRET_KEY = 'yuki-app-login-secret';
+const SESSION_KEY = 'yuki-user-session';
+
+interface IAuthContext {
+    user: UserProfile | null;
+    isLoading: boolean;
+    login: (name: string, secret: string) => boolean;
+    logout: () => void;
+    updateCredentials: (currentSecret: string, newName: string, newSecret: string) => { success: boolean; message: string };
+}
+
+export const AuthContext = createContext<IAuthContext>({
+    user: null,
+    isLoading: true,
+    login: () => false,
+    logout: () => {},
+    updateCredentials: () => ({ success: false, message: 'Not implemented' }),
+});
+
+const createAuthenticatedUser = (name: string): UserProfile => ({
+    id: `user-${name}`,
+    name: "Bonsai Master",
+    email: '', // Not needed for this auth model
+    picture: '', // Not needed for this auth model
+});
+
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const [user, setUser] = useState<UserProfile | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const storageKey = 'yuki-user-session'; // Keep existing name for session for backward compatibility
+
+    useEffect(() => {
+        try {
+            const session = window.localStorage.getItem(storageKey);
+            if (session) {
+                const sessionUser = JSON.parse(session);
+                setUser(sessionUser);
+            }
+        } catch (error) {
+            console.error("Failed to parse user session:", error);
+            window.localStorage.removeItem(storageKey);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [storageKey]);
+
+    const login = useCallback((name: string, secret: string): boolean => {
+        const customName = window.localStorage.getItem(CUSTOM_NAME_KEY);
+        const customSecret = window.localStorage.getItem(CUSTOM_SECRET_KEY);
+
+        const effectiveName = customName || KOFI_LOGIN_NAME;
+        const effectiveSecret = customSecret || KOFI_SECRET_PASSWORD;
+
+        if (name === effectiveName && secret === effectiveSecret) {
+            const authenticatedUser = createAuthenticatedUser(name);
+            try {
+                window.localStorage.setItem(storageKey, JSON.stringify(authenticatedUser));
+                setUser(authenticatedUser);
+                return true;
+            } catch (error) {
+                console.error("Failed to save user session:", error);
+                return false;
+            }
+        }
+        return false;
+    }, [storageKey]);
+
+    const logout = useCallback(() => {
+        try {
+            window.localStorage.removeItem(storageKey);
+            setUser(null);
+        } catch (error) {
+            console.error("Failed to clear user session:", error);
+        }
+    }, [storageKey]);
+    
+    const updateCredentials = useCallback((currentSecret: string, newName: string, newSecret: string): { success: boolean; message: string } => {
+        const customSecret = window.localStorage.getItem(CUSTOM_SECRET_KEY);
+        const effectiveSecret = customSecret || KOFI_SECRET_PASSWORD;
+
+        if (currentSecret !== effectiveSecret) {
+            return { success: false, message: "Current secret password is incorrect." };
+        }
+        
+        if (!newName.trim() || !newSecret.trim()) {
+            return { success: false, message: "New login name and secret cannot be empty." };
+        }
+
+        try {
+            window.localStorage.setItem(CUSTOM_NAME_KEY, newName);
+            window.localStorage.setItem(CUSTOM_SECRET_KEY, newSecret);
+            return { success: true, message: "Credentials updated successfully! You will need to use these next time you log in." };
+        } catch (error) {
+            console.error("Failed to update credentials:", error);
+            return { success: false, message: "Failed to save new credentials due to a storage error." };
+        }
+    }, []);
+
+    return (
+        <AuthContext.Provider value={{ user, isLoading, login, logout, updateCredentials }}>
+            {children}
+        </AuthContext.Provider>
+    );
+};

hooks/useLocalStorage.ts

@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+
+// A hook for persisting state to localStorage, now user-agnostic.
+export function useLocalStorage<T>(key: string, initialValue: T): [T, React.Dispatch<React.SetStateAction<T>>] {
+    
+    // Create a static key.
+    const storageKey = `yuki-app-${key}`;
+
+    const [storedValue, setStoredValue] = useState<T>(() => {
+        try {
+            if (typeof window === 'undefined') return initialValue;
+            const item = window.localStorage.getItem(storageKey);
+            return item ? JSON.parse(item) : initialValue;
+        } catch (error) {
+            console.error(error);
+            return initialValue;
+        }
+    });
+
+    useEffect(() => {
+        try {
+            const item = window.localStorage.getItem(storageKey);
+            if (item) {
+                setStoredValue(JSON.parse(item));
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    }, [storageKey]);
+
+
+    const setValue: React.Dispatch<React.SetStateAction<T>> = (value) => {
+        try {
+            const valueToStore = value instanceof Function ? value(storedValue) : value;
+            setStoredValue(valueToStore);
+            if (typeof window !== 'undefined') {
+                window.localStorage.setItem(storageKey, JSON.stringify(valueToStore));
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    };
+    return [storedValue, setValue];
+}

index.html

@@ -1,19 +1,39 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Yuki - Your AI Bonsai Sensei</title>
+    <link rel="manifest" href="/manifest.json">
+    <meta name="theme-color" content="#f5f5f4">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      /* Custom font for a more serene feel */
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+      html, body, #root {
+        height: 100%;
+      }
+      body {
+        font-family: 'Inter', sans-serif;
+      }
+    </style>
+  <script type="importmap">
+{
+  "imports": {
+    "react": "https://esm.sh/react@^19.1.0",
+    "react-dom/": "https://esm.sh/react-dom@^19.1.0/",
+    "react/": "https://esm.sh/react@^19.1.0/",
+    "@google/genai": "https://esm.sh/@google/genai@^1.9.0",
+    "suncalc": "https://esm.sh/[email protected]",
+    "jwt-decode": "https://esm.sh/[email protected]"
+  }
+}
+</script>
+<script src="https://accounts.google.com/gsi/client" async></script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body class="bg-stone-50 text-stone-800">
+    <div id="root"></div>
+  <script type="module" src="/index.tsx"></script>
+</body>
+</html>

index.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

manifest.json

@@ -0,0 +1,21 @@
+{
+  "short_name": "Yuki Bonsai",
+  "name": "Yuki - Your AI Bonsai Sensei",
+  "icons": [
+    {
+      "src": "icon-192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "icon-512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#f5f5f4",
+  "background_color": "#f5f5f4",
+  "description": "Yuki is your AI Bonsai Sensei, helping you cultivate the ancient art of bonsai with modern intelligence."
+}

metadata.json

@@ -0,0 +1,7 @@
+{
+  "name": "Yuki - Your AI Bonsai Sensei",
+  "description": "Yuki is your AI Bonsai Sensei, helping you cultivate the ancient art of bonsai with modern intelligence. Get photo-based health diagnostics, climate-adjusted task scheduling, and track your tree's growth with an AI-powered growth diary.",
+  "requestFramePermissions": [
+    "camera"
+  ]
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "yuki---your-ai-bonsai-sensei",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "@google/genai": "^1.9.0",
+    "suncalc": "1.9.0",
+    "jwt-decode": "4.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.2.0"
+  }
+}

service-worker.js

@@ -0,0 +1,66 @@
+const CACHE_NAME = 'yuki-bonsai-cache-v1';
+const APP_SHELL_URLS = [
+  '/',
+  '/index.html'
+];
+
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => cache.addAll(APP_SHELL_URLS))
+      .then(() => self.skipWaiting())
+  );
+});
+
+self.addEventListener('activate', event => {
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (cacheName !== CACHE_NAME) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    }).then(() => self.clients.claim())
+  );
+});
+
+self.addEventListener('fetch', event => {
+  if (event.request.method !== 'GET') {
+    return;
+  }
+  
+  // For navigation requests, use a network-first strategy to get latest HTML.
+  if (event.request.mode === 'navigate') {
+    event.respondWith(
+      fetch(event.request)
+        .catch(() => caches.match('/index.html'))
+    );
+    return;
+  }
+
+  // For all other requests (JS, CSS, images from esm.sh), use a cache-first strategy.
+  event.respondWith(
+    caches.match(event.request).then(cachedResponse => {
+      if (cachedResponse) {
+        return cachedResponse;
+      }
+
+      return fetch(event.request).then(response => {
+        // Don't cache opaque responses (from CDNs without CORS) or non-200 responses.
+        if (!response || response.status !== 200 || response.type === 'opaque') {
+          return response;
+        }
+
+        const responseToCache = response.clone();
+        caches.open(CACHE_NAME)
+          .then(cache => {
+            cache.put(event.request, responseToCache);
+          });
+
+        return response;
+      });
+    })
+  );
+});

services/geminiService.ts

@@ -0,0 +1,917 @@
+
+
+
+import { GoogleGenAI, Type, Part } from "@google/genai";
+import type { BonsaiAnalysis, PestLibraryEntry, SeasonalGuide, ToolRecommendation, MaintenanceTips, DiaryAIAnalysis, HealthCheckResult, SpeciesIdentificationResult, StylingBlueprint, SoilAnalysis, ProtectionProfile } from '../types';
+
+let ai: GoogleGenAI | null = null;
+
+// Function to initialize or re-initialize the AI client
+export function reinitializeAI() {
+    const apiKey = window.localStorage.getItem('gemini-api-key');
+    if (apiKey) {
+        try {
+            ai = new GoogleGenAI({ apiKey });
+        } catch (e) {
+            console.error("Failed to initialize GoogleGenAI, likely due to an invalid API key format.", e);
+            ai = null;
+        }
+    } else {
+        ai = null;
+    }
+}
+
+// Function to check if the AI is configured
+export function isAIConfigured(): boolean {
+    return ai !== null;
+}
+
+// Initialize on load
+reinitializeAI();
+
+
+const protectionProfileSchema = {
+    type: Type.OBJECT,
+    properties: {
+        minTempC: { type: Type.INTEGER, description: "The minimum safe temperature in Celsius the tree can tolerate without protection." },
+        maxTempC: { type: Type.INTEGER, description: "The maximum safe temperature in Celsius before the tree might suffer from heat stress." },
+        maxWindKph: { type: Type.INTEGER, description: "The maximum sustained wind speed in km/h the tree can handle before risking damage or dehydration." },
+    },
+    required: ["minTempC", "maxTempC", "maxWindKph"]
+};
+
+const pestLibrarySchema = {
+    type: Type.ARRAY,
+    description: "A library of common pests and diseases for this species and region.",
+    items: {
+        type: Type.OBJECT,
+        properties: {
+            name: { type: Type.STRING },
+            type: { type: Type.STRING, enum: ['Pest', 'Disease'] },
+            description: { type: Type.STRING },
+            symptoms: { type: Type.ARRAY, items: { type: Type.STRING }},
+            treatment: {
+                type: Type.OBJECT,
+                properties: {
+                    organic: { type: Type.STRING },
+                    chemical: { type: Type.STRING }
+                },
+                required: ["organic", "chemical"]
+            }
+        },
+        required: ["name", "type", "description", "symptoms", "treatment"]
+    }
+};
+
+const seasonalGuideSchema = {
+    type: Type.ARRAY,
+    description: "A high-level guide for all four seasons.",
+    items: {
+        type: Type.OBJECT,
+        properties: {
+            season: { type: Type.STRING, enum: ['Spring', 'Summer', 'Autumn', 'Winter'] },
+            summary: { type: Type.STRING },
+            tasks: {
+                type: Type.ARRAY,
+                items: {
+                    type: Type.OBJECT,
+                    properties: {
+                        task: { type: Type.STRING },
+                        importance: { type: Type.STRING, enum: ['High', 'Medium', 'Low'] }
+                    },
+                    required: ["task", "importance"]
+                }
+            }
+        },
+        required: ["season", "summary", "tasks"]
+    }
+};
+
+const toolRecommendationsSchema = {
+    type: Type.ARRAY,
+    description: "A list of recommended tools and supplies.",
+    items: {
+        type: Type.OBJECT,
+        properties: {
+            name: { type: Type.STRING },
+            category: { type: Type.STRING, enum: ['Cutting', 'Wiring', 'Repotting', 'General Care'] },
+            description: { type: Type.STRING },
+            level: { type: Type.STRING, enum: ['Essential', 'Recommended', 'Advanced'] }
+        },
+        required: ["name", "category", "description", "level"]
+    }
+};
+
+const maintenanceTipsSchema = {
+    type: Type.OBJECT,
+    properties: {
+        sharpening: { type: Type.STRING, description: "A concise guide on how to sharpen this specific tool. Mention needed supplies like whetstones or files." },
+        cleaning: { type: Type.STRING, description: "Instructions for cleaning the tool after use to prevent disease and rust. Mention things like sap remover." },
+        storage: { type: Type.STRING, description: "Best practices for storing the tool to ensure its longevity, like oiling and proper placement." }
+    },
+    required: ["sharpening", "cleaning", "storage"]
+};
+
+const diaryAIAnalysisSchema = {
+    type: Type.OBJECT,
+    properties: {
+        summary: { type: Type.STRING, description: "A concise summary of observed changes since the last log entry. Note new growth, color changes, or any potential issues." },
+        healthChange: { type: Type.INTEGER, description: "An estimated integer value of the health change since the last photo. Can be positive, negative, or zero." },
+        suggestions: { type: Type.ARRAY, items: { type: Type.STRING }, description: "1-2 actionable suggestions based on the observations." },
+    },
+    required: ["summary"]
+};
+
+const healthCheckResultSchema = {
+    type: Type.OBJECT,
+    properties: {
+        probableCause: { type: Type.STRING, description: "The most likely specific cause of the issue (e.g., 'Spider Mite Infestation', 'Root Rot due to Overwatering', 'Iron Chlorosis')." },
+        confidence: { type: Type.STRING, enum: ['High', 'Medium', 'Low'], description: "The AI's confidence level in this diagnosis." },
+        explanation: { type: Type.STRING, description: "A detailed explanation of why this diagnosis was reached, referencing visual cues from the image and the user's problem description." },
+        isPest: { type: Type.BOOLEAN, description: "True if the primary cause is a pest." },
+        isDisease: { type: Type.BOOLEAN, description: "True if the primary cause is a fungal, bacterial, or viral disease." },
+        treatmentPlan: {
+            type: Type.ARRAY,
+            description: "A step-by-step, actionable treatment plan.",
+            items: {
+                type: Type.OBJECT,
+                properties: {
+                    step: { type: Type.INTEGER },
+                    action: { type: Type.STRING, description: "A short, clear title for the step (e.g., 'Isolate the Tree', 'Apply Neem Oil')." },
+                    details: { type: Type.STRING, description: "Detailed instructions on how to perform the action." }
+                },
+                required: ["step", "action", "details"]
+            }
+        },
+        organicAlternatives: { type: Type.STRING, description: "A summary of organic or non-chemical treatment options available." },
+        preventativeMeasures: { type: Type.STRING, description: "Advice on how to prevent this issue from recurring in the future." }
+    },
+    required: ["probableCause", "confidence", "explanation", "isPest", "isDisease", "treatmentPlan", "organicAlternatives", "preventativeMeasures"]
+};
+
+const speciesIdentificationSchema = {
+    type: Type.OBJECT,
+    properties: {
+        identifications: {
+            type: Type.ARRAY,
+            description: "An array of possible species identifications, ordered from most to least likely.",
+            items: {
+                type: Type.OBJECT,
+                properties: {
+                    commonName: { type: Type.STRING },
+                    scientificName: { type: Type.STRING },
+                    confidence: { type: Type.STRING, enum: ['High', 'Medium', 'Low'] },
+                    reasoning: { type: Type.STRING, description: "Why the AI made this identification based on visual cues." },
+                    generalCareSummary: { type: Type.STRING, description: "A very brief, one-paragraph summary of the most critical care aspects for this species (light, water, soil)." }
+                },
+                 required: ["commonName", "scientificName", "confidence", "reasoning", "generalCareSummary"]
+            }
+        }
+    },
+    required: ["identifications"]
+};
+
+const soilAnalysisSchema = {
+    type: Type.OBJECT,
+    properties: {
+        components: {
+            type: Type.ARRAY,
+            description: "The identified components of the soil mix and their estimated percentages.",
+            items: {
+                type: Type.OBJECT,
+                properties: {
+                    name: { type: Type.STRING, enum: ['Akadama', 'Pumice', 'Lava Rock', 'Organic Compost', 'Kiryu', 'Pine Bark', 'Diatomaceous Earth', 'Sand', 'Grit', 'Other'] },
+                    percentage: { type: Type.INTEGER },
+                },
+                required: ["name", "percentage"]
+            }
+        },
+        drainageRating: { type: Type.STRING, enum: ['Poor', 'Average', 'Good', 'Excellent'] },
+        waterRetention: { type: Type.STRING, enum: ['Low', 'Medium', 'High'] },
+        suitabilityAnalysis: { type: Type.STRING, description: "Analysis of the soil's suitability for the specified species and location." },
+        improvementSuggestions: { type: Type.STRING, description: "Actionable suggestions to improve the soil mix." }
+    },
+    required: ["components", "drainageRating", "waterRetention", "suitabilityAnalysis", "improvementSuggestions"]
+};
+
+const stylingBlueprintSchema = {
+    type: Type.OBJECT,
+    properties: {
+        summary: { type: Type.STRING, description: "A concise summary of the overall styling strategy." },
+        canvas: {
+            type: Type.OBJECT,
+            properties: {
+                width: { type: Type.INTEGER, description: "The width of the canvas the coordinates are based on. Always use 1000." },
+                height: { type: Type.INTEGER, description: "The height of the canvas the coordinates are based on. Always use 1000." },
+            },
+            required: ["width", "height"]
+        },
+        annotations: {
+            type: Type.ARRAY,
+            items: {
+                type: Type.OBJECT,
+                properties: {
+                    type: { type: Type.STRING, enum: ['PRUNE_LINE', 'WIRE_DIRECTION', 'REMOVE_BRANCH', 'FOLIAGE_REFINEMENT', 'JIN_SHARI', 'TRUNK_LINE', 'EXPOSE_ROOT'] },
+                    points: { 
+                        type: Type.ARRAY, 
+                        description: "An array of {x, y} coordinates for drawing lines or polygons. Required for most types except those using 'path'.",
+                        items: {
+                            type: Type.OBJECT,
+                            properties: {
+                                x: { type: Type.INTEGER },
+                                y: { type: Type.INTEGER }
+                            },
+                            required: ["x", "y"]
+                        }
+                    },
+                    path: { type: Type.STRING, description: "An SVG path data string (e.g., 'M 10 10 Q 20 20 30 10'). Use for complex curves like wiring directions or trunk lines." },
+                    label: { type: Type.STRING, description: "A concise, user-facing label explaining the annotation (e.g., 'Prune here to shorten branch')." }
+                },
+                required: ["type", "label"]
+            }
+        }
+    },
+    required: ["summary", "canvas", "annotations"]
+};
+
+
+const bonsaiAnalysisSchema = {
+  type: Type.OBJECT,
+  properties: {
+    species: { type: Type.STRING, description: "The scientific or common name of the bonsai species identified."},
+    healthAssessment: {
+      type: Type.OBJECT,
+      description: "A detailed assessment of the bonsai's health.",
+      properties: {
+        overallHealth: { type: Type.STRING, description: "A summary of the tree's health (e.g., 'Excellent', 'Needs Attention', 'Stressed')." },
+        healthScore: { type: Type.INTEGER, description: "A numerical health score from 1 to 100, where 100 is perfect health." },
+        observations: { type: Type.ARRAY, items: { type: Type.STRING }, description: "Specific visual observations from the image." },
+        foliageHealth: { type: Type.STRING, description: "Analysis of the leaves/needles (color, density, size)." },
+        trunkAndNebariHealth: { type: Type.STRING, description: "Analysis of the trunk, bark, and surface roots (nebari)." },
+        potAndSoilHealth: { type: Type.STRING, description: "Analysis of the pot condition and visible soil surface." },
+      },
+      required: ["overallHealth", "healthScore", "observations", "foliageHealth", "trunkAndNebariHealth", "potAndSoilHealth"]
+    },
+    careSchedule: {
+      type: Type.ARRAY,
+      description: "A 4-week care schedule adjusted for species and climate.",
+      items: {
+        type: Type.OBJECT,
+        properties: {
+          week: { type: Type.INTEGER, description: "The week number (1-4)." },
+          task: { type: Type.STRING, description: "The primary task for the week (e.g., 'Watering', 'Fertilizing', 'Pruning')." },
+          details: { type: Type.STRING, description: "Specific instructions for the task." },
+          toolsNeeded: { type: Type.ARRAY, items: { type: Type.STRING }, description: "A list of tools needed for the task." },
+        },
+        required: ["week", "task", "details"]
+      }
+    },
+    pestAndDiseaseAlerts: {
+      type: Type.ARRAY,
+      description: "Potential pests or diseases to watch for, with severity assessment.",
+      items: {
+        type: Type.OBJECT,
+        properties: {
+          pestOrDisease: { type: Type.STRING },
+          symptoms: { type: Type.STRING },
+          treatment: { type: Type.STRING },
+          severity: { type: Type.STRING, enum: ["Low", "Medium", "High"] }
+        },
+        required: ["pestOrDisease", "symptoms", "treatment", "severity"]
+      }
+    },
+    stylingSuggestions: {
+      type: Type.ARRAY,
+      description: "Actionable advice for styling the bonsai.",
+      items: {
+        type: Type.OBJECT,
+        properties: {
+          technique: { type: Type.STRING, enum: ['Pruning', 'Wiring', 'Shaping'] },
+          description: { type: Type.STRING, description: "Detailed 'how-to' for the technique." },
+          area: { type: Type.STRING, description: "The part of the tree to apply the technique to." },
+        },
+        required: ["technique", "description", "area"]
+      }
+    },
+    environmentalFactors: {
+        type: Type.OBJECT,
+        description: "Ideal environmental conditions for the species.",
+        properties: {
+            idealLight: { type: Type.STRING, description: "e.g., '6-8 hours of direct morning sun, afternoon shade'" },
+            idealHumidity: { type: Type.STRING, description: "e.g., 'Prefers 50-70% humidity, mist daily if lower'" },
+            temperatureRange: { type: Type.STRING, description: "e.g., 'Tolerates 50-85°F (10-30°C)'" },
+        },
+        required: ["idealLight", "idealHumidity", "temperatureRange"]
+    },
+    wateringAnalysis: {
+        type: Type.OBJECT,
+        description: "Specific watering advice.",
+        properties: {
+            frequency: { type: Type.STRING, description: "How often to water, e.g., 'Every 1-3 days, check soil first'" },
+            method: { type: Type.STRING, description: "Recommended watering method, e.g., 'Immersion or top-watering until drains'" },
+            notes: { type: Type.STRING, description: "Additional notes, e.g., 'Allow soil to become slightly dry between waterings. Use filtered water if possible.'" }
+        },
+        required: ["frequency", "method", "notes"]
+    },
+    knowledgeNuggets: {
+      type: Type.ARRAY,
+      description: "Three interesting, little-known facts about this specific bonsai species.",
+      items: { type: Type.STRING }
+    },
+    estimatedAge: {
+      type: Type.STRING,
+      description: "An estimated age range of the bonsai based on its trunk, nebari, and branch structure."
+    },
+    fertilizerRecommendations: {
+        type: Type.ARRAY,
+        description: "A seasonal fertilization plan.",
+        items: {
+            type: Type.OBJECT,
+            properties: {
+                phase: { type: Type.STRING, enum: ['Spring Growth', 'Summer Maintenance', 'Autumn Preparation', 'Winter Dormancy'] },
+                type: { type: Type.STRING, description: "e.g., 'Balanced (e.g., 10-10-10)'" },
+                frequency: { type: Type.STRING },
+                notes: { type: Type.STRING }
+            },
+            required: ["phase", "type", "frequency", "notes"]
+        }
+    },
+    soilRecipe: {
+        type: Type.OBJECT,
+        description: "A precise soil mixture recipe.",
+        properties: {
+            components: {
+                type: Type.ARRAY,
+                items: {
+                    type: Type.OBJECT,
+                    properties: {
+                        name: { type: Type.STRING, enum: ['Akadama', 'Pumice', 'Lava Rock', 'Organic Compost', 'Kiryu', 'Other'] },
+                        percentage: { type: Type.INTEGER },
+                        notes: { type: Type.STRING }
+                    },
+                    required: ["name", "percentage", "notes"]
+                }
+            },
+            rationale: { type: Type.STRING, description: "Justification for this specific soil mix." }
+        },
+        required: ["components", "rationale"]
+    },
+    potSuggestion: {
+        type: Type.OBJECT,
+        description: "Recommendation for an appropriate pot.",
+        properties: {
+            style: { type: Type.STRING, description: "e.g., 'Unglazed Rectangular'" },
+            size: { type: Type.STRING, description: "Recommended size relative to the tree." },
+            colorPalette: { type: Type.STRING },
+            rationale: { type: Type.STRING, description: "Aesthetic and horticultural reasoning." }
+        },
+        required: ["style", "size", "colorPalette", "rationale"]
+    },
+    seasonalGuide: seasonalGuideSchema,
+    diagnostics: {
+        type: Type.ARRAY,
+        description: "Advanced diagnostics for potential underlying issues.",
+        items: {
+            type: Type.OBJECT,
+            properties: {
+                issue: { type: Type.STRING },
+                confidence: { type: Type.STRING, enum: ['High', 'Medium', 'Low'] },
+                symptoms: { type: Type.STRING, description: "Symptoms to watch for."},
+                solution: { type: Type.STRING, description: "Preventative or corrective solutions."}
+            },
+            required: ["issue", "confidence", "symptoms", "solution"]
+        }
+    },
+    pestLibrary: pestLibrarySchema,
+    toolRecommendations: toolRecommendationsSchema
+  },
+  required: [
+    "species", "healthAssessment", "careSchedule", "pestAndDiseaseAlerts", 
+    "stylingSuggestions", "environmentalFactors", "wateringAnalysis", "knowledgeNuggets", 
+    "estimatedAge", "fertilizerRecommendations", "soilRecipe", "potSuggestion", 
+    "seasonalGuide", "diagnostics", "pestLibrary", "toolRecommendations"
+  ]
+};
+
+async function generate(prompt: string, schema: any) {
+    if (!isAIConfigured()) {
+        throw new Error("AI is not configured. Please set your API key in Settings.");
+    }
+    const response = await ai!.models.generateContent({
+      model: 'gemini-2.5-flash',
+      contents: { parts: [{ text: prompt }] },
+      config: {
+        responseMimeType: "application/json",
+        responseSchema: schema
+      }
+    });
+    const jsonText = response.text.trim();
+    if (!jsonText) {
+        console.error("Gemini API returned an empty response.");
+        return null;
+    }
+    return JSON.parse(jsonText);
+}
+
+function handleAIError(error: any): null {
+    console.error("Error communicating with AI:", error);
+    if (error instanceof Error && (error.message.includes('API key not valid') || error.message.includes('permission to access') || error.message.includes('400'))) {
+        throw new Error("Your Gemini API key is not valid or has incorrect permissions. Please check it in Settings.");
+    }
+    return null;
+}
+
+
+export const analyzeBonsai = async (
+  imageBase64: string,
+  species: string,
+  location: string
+): Promise<BonsaiAnalysis | null> => {
+  if (!isAIConfigured()) {
+      throw new Error("AI is not configured. Please set your API key in Settings.");
+  }
+  try {
+    const prompt = `You are 'Yuki', a world-renowned bonsai master with 50 years of experience. Analyze the provided image of a bonsai, which the user says is a ${species}, located in/near ${location}. Your analysis MUST be comprehensive, scientifically accurate, and deeply insightful, tailored to both the species and the local climate.
+    
+    Based on the visual evidence, regional climate data for ${location}, and your expert knowledge of ${species} bonsai, provide a complete and structured analysis covering all the following points:
+
+    1.  **Confirm Species:** First, confirm if the image looks like a ${species}. If not, identify the correct species. Populate the 'species' field with the correct name.
+    2.  **Health Assessment:** Conduct a thorough health diagnosis. Provide a numerical score (1-100). Detail the health of foliage, trunk/nebari, and pot/soil.
+    3.  **Care Schedule:** Create a highly specific 4-week care plan. Include tasks, detailed instructions, and a list of tools for each week.
+    4.  **Pest/Disease Alerts:** Identify any *active* pests or diseases on the tree. If none, list preventative measures.
+    5.  **Styling Advice:** Provide at least two actionable styling suggestions (pruning, wiring, shaping) suitable for the tree's current state and species characteristics.
+    6.  **Environment:** Specify the ideal light, humidity, and temperature for this species.
+    7.  **Watering:** Give a detailed watering analysis - frequency, method, and important notes.
+    8.  **Age Estimation:** Estimate the tree's age range based on trunk thickness, bark texture, and nebari.
+    9.  **Knowledge Nuggets:** Provide three fascinating, little-known facts about this species. These should be 'insider' knowledge that a true enthusiast would appreciate.
+    10. **Fertilizer Plan:** Based on the species, health, and time of year, provide a seasonal fertilizer plan. Specify N-P-K ratios or fertilizer type (e.g., solid organic, liquid chemical), and frequency for each season.
+    11. **Soil Recipe:** Recommend a precise soil mixture recipe in percentages (e.g., 40% Akadama, 30% Pumice, 20% Lava Rock, 10% Compost). Justify why this mix is ideal for this species' drainage and water retention needs.
+    12. **Pot Selection:** Suggest an appropriate pot. Consider style (e.g., formal upright, cascade), material (e.g., unglazed ceramic), color, and size relative to the tree. Explain the aesthetic and horticultural reasoning.
+    13. **Full-Year Seasonal Guide:** Provide a high-level guide for all four seasons (Spring, Summer, Autumn, Winter) for this tree in ${location}. For each season, summarize the main goals and list key tasks with their importance level (High, Medium, Low).
+    14. **Advanced Diagnostics:** Based on subtle cues in the image and common issues for this species/climate, identify 2-3 potential underlying problems (e.g., root rot, nutrient deficiency, salt buildup) even if not in a critical state yet. Provide confidence level, symptoms to watch for, and preventative solutions.
+    15. **Pest & Disease Library:** Generate a mini-library of the 3 most common pests and diseases for this species in ${location}. This is for general knowledge. For each, provide a description, symptoms, and both organic and chemical treatment options.
+    16. **Tool & Supply Recommendations:** Provide a list of essential and advanced tools and supplies for this tree. Categorize them (e.g., Cutting, Wiring, Repotting, General Care) and explain why each is needed. Mark each as 'Essential', 'Recommended', or 'Advanced'.`;
+
+    const imagePart = {
+      inlineData: {
+        mimeType: 'image/jpeg',
+        data: imageBase64,
+      },
+    };
+
+    const textPart = { text: prompt };
+    
+    const response = await ai!.models.generateContent({
+      model: 'gemini-2.5-flash',
+      contents: { parts: [imagePart, textPart] },
+      config: {
+        responseMimeType: "application/json",
+        responseSchema: bonsaiAnalysisSchema
+      }
+    });
+
+    const jsonText = response.text.trim();
+    if (!jsonText) {
+        console.error("Gemini API returned an empty response.");
+        return null;
+    }
+
+    return JSON.parse(jsonText) as BonsaiAnalysis;
+  } catch (error) {
+    return handleAIError(error);
+  }
+};
+
+export const analyzeFollowUp = async (
+  imageBase64: string,
+  previousAnalysis: BonsaiAnalysis,
+  species: string,
+  location: string
+): Promise<BonsaiAnalysis | null> => {
+   if (!isAIConfigured()) {
+      throw new Error("AI is not configured. Please set your API key in Settings.");
+  }
+  try {
+    const prompt = `You are 'Yuki', a world-renowned bonsai master providing a follow-up consultation for a ${species} in ${location}.
+    
+    Attached is a **new photo** of the bonsai.
+    
+    Below is the **previous analysis JSON data** for context.
+    
+    Your task is to:
+    1.  Perform a full, new analysis based on the **new photo**, using the same comprehensive JSON schema as before.
+    2.  **Crucially, your analysis should reflect changes from the previous state.** In your text fields (like observations, health assessments), explicitly compare and contrast. For example: "Foliage health has improved, appearing much fuller than in the last analysis," or "A new area of concern is the slight yellowing on the left lower branch, which was not present previously."
+    3.  Update the health score and all other fields based on the new visual information. The goal is to create a new, complete report that also serves as a progress update.
+
+    Previous Analysis for context:
+    ${JSON.stringify(previousAnalysis, null, 2)}
+    `;
+
+    const imagePart = {
+      inlineData: {
+        mimeType: 'image/jpeg',
+        data: imageBase64,
+      },
+    };
+    
+    const textPart = { text: prompt };
+
+    const response = await ai!.models.generateContent({
+      model: 'gemini-2.5-flash',
+      contents: { parts: [imagePart, textPart] },
+      config: {
+        responseMimeType: "application/json",
+        responseSchema: bonsaiAnalysisSchema
+      }
+    });
+
+    const jsonText = response.text.trim();
+    if (!jsonText) {
+      console.error("Gemini API returned an empty response for follow-up.");
+      return null;
+    }
+
+    return JSON.parse(jsonText) as BonsaiAnalysis;
+  } catch (error) {
+    return handleAIError(error);
+  }
+};
+
+export const runHealthCheck = async (
+    imageBase64: string,
+    species: string,
+    location: string,
+    problemCategory: string
+): Promise<HealthCheckResult | null> => {
+    if (!isAIConfigured()) {
+      throw new Error("AI is not configured. Please set your API key in Settings.");
+    }
+    try {
+        const prompt = `You are 'Yuki', a bonsai diagnostician and plant pathologist. A user needs an urgent health check-up for their bonsai.
+
+        - **Species:** ${species}
+        - **Location:** ${location}
+        - **Reported Problem Area:** ${problemCategory}
+        
+        Analyze the provided close-up image showing the problem. Your task is to provide a precise diagnosis and an easy-to-follow treatment plan. Focus ONLY on the visible problem. Be methodical and scientific.
+
+        1.  **Diagnose:** Identify the specific cause (e.g., 'Spider Mite Infestation', 'Root Rot due to Overwatering', 'Iron Chlorosis'). State your confidence level.
+        2.  **Explain:** Describe *why* you made this diagnosis, citing evidence from the image.
+        3.  **Treat:** Create a numbered, step-by-step treatment plan. The steps must be clear and actionable for an amateur.
+        4.  **Offer Alternatives:** Briefly describe common organic alternatives.
+        5.  **Prevent:** Give advice on preventing recurrence.
+        6.  **Categorize:** Set the 'isPest' and 'isDisease' flags appropriately.
+
+        Generate the response strictly following the provided JSON schema.`;
+        
+        const imagePart = { inlineData: { mimeType: 'image/jpeg', data: imageBase64 }};
+        const textPart = { text: prompt };
+
+        const response = await ai!.models.generateContent({
+            model: 'gemini-2.5-flash',
+            contents: { parts: [imagePart, textPart] },
+            config: {
+                responseMimeType: "application/json",
+                responseSchema: healthCheckResultSchema
+            }
+        });
+
+        const jsonText = response.text.trim();
+        if (!jsonText) {
+            console.error("Gemini API returned an empty response for health check.");
+            return null;
+        }
+
+        return JSON.parse(jsonText) as HealthCheckResult;
+
+    } catch (error) {
+        return handleAIError(error);
+    }
+};
+
+export const identifyBonsaiSpecies = async (imageBase64: string): Promise<SpeciesIdentificationResult | null> => {
+    if (!isAIConfigured()) {
+        throw new Error("AI is not configured. Please set your API key in Settings.");
+    }
+    try {
+        const prompt = `You are a world-class botanist specializing in bonsai identification. Analyze the provided image of a tree and identify its species. Provide the most likely common name and the scientific name. If you are uncertain, provide a few possibilities with your confidence level for each. For each identification, provide a brief summary of its essential care needs.`;
+        
+        const imagePart = { inlineData: { mimeType: 'image/jpeg', data: imageBase64 }};
+        const textPart = { text: prompt };
+
+        const response = await ai!.models.generateContent({
+            model: 'gemini-2.5-flash',
+            contents: { parts: [imagePart, textPart] },
+            config: {
+                responseMimeType: "application/json",
+                responseSchema: speciesIdentificationSchema
+            }
+        });
+
+        const jsonText = response.text.trim();
+        if (!jsonText) {
+            console.error("Gemini API returned an empty response for species ID.");
+            return null;
+        }
+
+        return JSON.parse(jsonText) as SpeciesIdentificationResult;
+
+    } catch (error) {
+        return handleAIError(error);
+    }
+};
+
+export const generatePestLibrary = async (location: string): Promise<PestLibraryEntry[] | null> => {
+    try {
+        const prompt = `You are 'Yuki', a bonsai master and entomologist. Generate a Pest & Disease Library for bonsai cultivators located in/near ${location}. Provide a list of the 5 most common pests and diseases they are likely to encounter. For each entry, provide its name, type (Pest or Disease), a brief description, common symptoms to look for on a bonsai tree, and recommended organic and chemical treatment options.`;
+        const result = await generate(prompt, { type: Type.OBJECT, properties: { result: pestLibrarySchema } });
+        return result ? result.result : null;
+    } catch(error) {
+        return handleAIError(error);
+    }
+}
+
+export const generateSeasonalGuide = async (species: string, location: string): Promise<SeasonalGuide[] | null> => {
+     try {
+        const prompt = `You are 'Yuki', a world-renowned bonsai master. Create a detailed, year-round seasonal guide for a ${species} bonsai located in the ${location} climate. For each of the four seasons (Spring, Summer, Autumn, Winter), provide a summary of the main cultivation goals and a list of key tasks with their importance level (High, Medium, Low).`;
+        const result = await generate(prompt, { type: Type.OBJECT, properties: { result: seasonalGuideSchema } });
+        return result ? result.result : null;
+    } catch(error) {
+        return handleAIError(error);
+    }
+}
+
+export const generateToolGuide = async (): Promise<ToolRecommendation[] | null> => {
+     try {
+        const prompt = `You are 'Yuki', a world-renowned bonsai master. Create a comprehensive guide to bonsai tools. Provide a list of essential, recommended, and advanced tools. For each tool, provide its name, category (Cutting, Wiring, Repotting, General Care), a description of its use, and its level (Essential, Recommended, or Advanced).`;
+        const result = await generate(prompt, { type: Type.OBJECT, properties: { result: toolRecommendationsSchema } });
+        return result ? result.result : null;
+    } catch(error) {
+        return handleAIError(error);
+    }
+}
+
+export const generateMaintenanceTips = async (toolName: string): Promise<MaintenanceTips | null> => {
+    if (!isAIConfigured()) {
+      throw new Error("AI is not configured. Please set your API key in Settings.");
+    }
+    try {
+        const prompt = `You are 'Yuki', a bonsai master and tool maintenance expert. Provide a concise, actionable maintenance guide for a specific bonsai tool: "${toolName}". The guide should be easy for an enthusiast to follow. Cover three key areas: sharpening, cleaning, and storage.`;
+        return await generate(prompt, maintenanceTipsSchema);
+    } catch(error) {
+        return handleAIError(error);
+    }
+}
+
+export const analyzeDiaryLog = async (
+    species: string,
+    newPhotosBase64: string[],
+    previousPhotoBase64?: string
+): Promise<DiaryAIAnalysis | null> => {
+    if (!isAIConfigured()) {
+        throw new Error("AI is not configured. Please set your API key in Settings.");
+    }
+    try {
+        let prompt = `You are 'Yuki', a bonsai master. This is a new diary log for a ${species} bonsai. Analyze the attached new photo(s).`;
+        const parts: Part[] = [];
+
+        if (previousPhotoBase64) {
+            prompt += ` A previous photo is also provided for comparison. Note the changes in health, growth, and structure. Provide a concise summary of these changes, estimate the health change as a single positive or negative integer (e.g., +5, -2, 0), and list 1-2 actionable suggestions based on the new visual data.`;
+            parts.push({
+                inlineData: { mimeType: 'image/jpeg', data: previousPhotoBase64 }
+            });
+            parts.push({ text: "Previous photo."});
+        } else {
+             prompt += ` This is the first analyzed entry for this tree. Provide a brief summary of the tree's current state, and list 1-2 actionable suggestions.`;
+        }
+
+        newPhotosBase64.forEach(photo => {
+            parts.push({ inlineData: { mimeType: 'image/jpeg', data: photo }});
+        });
+
+        parts.push({ text: prompt });
+        
+        const response = await ai!.models.generateContent({
+            model: 'gemini-2.5-flash',
+            contents: { parts: parts },
+            config: {
+                responseMimeType: "application/json",
+                responseSchema: diaryAIAnalysisSchema
+            }
+        });
+
+        const jsonText = response.text.trim();
+        if (!jsonText) {
+            console.error("Gemini API returned an empty response.");
+            return null;
+        }
+        return JSON.parse(jsonText) as DiaryAIAnalysis;
+
+    } catch (error) {
+        return handleAIError(error);
+    }
+};
+
+
+export const analyzeGrowthProgression = async (
+    species: string,
+    photos: { date: string, image: string }[]
+): Promise<string | null> => {
+    if (photos.length < 2) return "Please select at least two photos to see a progression.";
+    if (!isAIConfigured()) {
+        throw new Error("AI is not configured. Please set your API key in Settings.");
+    }
+    try {
+        const parts: Part[] = [];
+        let prompt = `You are 'Yuki', a bonsai master. Analyze the following series of images of a ${species} bonsai, provided with their corresponding dates. The images are ordered chronologically. Write a narrative describing the tree's journey and development over this period. Comment on changes in ramification, trunk thickness, leaf/needle health, styling decisions (like pruning or wiring) that are visible, and the overall aesthetic evolution of the tree. Be insightful and encouraging.
+        
+`;
+
+        photos.forEach(({date, image}) => {
+            prompt += `Image from: ${new Date(date).toLocaleDateString()}\n`;
+            parts.push({ inlineData: { mimeType: 'image/jpeg', data: image }});
+        });
+        
+        parts.push({text: prompt});
+
+        const response = await ai!.models.generateContent({
+            model: 'gemini-2.5-flash',
+            contents: { parts },
+        });
+
+        return response.text;
+
+    } catch (error) {
+        return handleAIError(error);
+    }
+};
+
+export const generateStylingBlueprint = async (imageBase64: string, styleInstructions: string): Promise<StylingBlueprint | null> => {
+    if (!isAIConfigured()) {
+        throw new Error("AI is not configured. Please set your API key in Settings.");
+    }
+    try {
+        const prompt = `You are 'Yuki', a world-renowned bonsai master and digital artist. You will create a digital styling blueprint for a bonsai tree. The user has provided an image and a styling goal: "${styleInstructions}".
+
+Your task is to analyze the image, identify key structural elements, and then generate a JSON object representing an SVG overlay to guide the user.
+
+**Analysis & Generation Rules:**
+1.  Mentally overlay a 1000x1000 coordinate grid on the provided image. All coordinates in your response MUST be relative to this 1000x1000 canvas.
+2.  Identify the trunk line, major branches, and foliage masses.
+3.  Based on the user's styling goal, create a JSON object conforming to the provided schema.
+4.  **Annotation Guidelines:**
+    - **PRUNE_LINE:** Use 'points' to draw a line indicating where a branch should be cut.
+    - **REMOVE_BRANCH:** Use 'points' to draw a polygon around a branch to be removed.
+    - **WIRE_DIRECTION:** Use an SVG 'path' string (e.g., "M x1 y1 Q x2 y2 x3 y3") to show the new direction of a wired branch.
+    - **FOLIAGE_REFINEMENT:** Use 'points' to draw a polygon for the ideal new shape of a foliage pad.
+    - **JIN_SHARI:** Use 'points' to outline an area on the trunk/branch to be turned into deadwood.
+    - **TRUNK_LINE:** Use a 'path' to highlight the main flow of the trunk.
+    - **EXPOSE_ROOT:** Use 'points' to outline an area where soil can be removed to expose more nebari.
+5.  Every annotation MUST have a clear, concise 'label'.
+6.  Provide an overall 'summary' of the styling strategy.
+
+Your response MUST be a valid JSON object matching the schema.`;
+
+        const imagePart = { inlineData: { mimeType: 'image/jpeg', data: imageBase64 } };
+        const textPart = { text: prompt };
+
+        const response = await ai!.models.generateContent({
+            model: 'gemini-2.5-flash',
+            contents: { parts: [imagePart, textPart] },
+            config: {
+                responseMimeType: "application/json",
+                responseSchema: stylingBlueprintSchema
+            }
+        });
+
+        const jsonText = response.text.trim();
+        if (!jsonText) {
+            console.error("Gemini API returned an empty response for styling blueprint.");
+            return null;
+        }
+
+        return JSON.parse(jsonText) as StylingBlueprint;
+
+    } catch (error) {
+        return handleAIError(error);
+    }
+};
+
+
+export const generateBonsaiImage = async (prompt: string): Promise<string | null> => {
+    if (!isAIConfigured()) {
+        throw new Error("AI is not configured. Please set your API key in Settings.");
+    }
+    try {
+        const response = await ai!.models.generateImages({
+            model: 'imagen-3.0-generate-002',
+            prompt: prompt,
+            config: {
+                numberOfImages: 1,
+                outputMimeType: 'image/jpeg',
+                aspectRatio: '1:1',
+            },
+        });
+
+        if (response.generatedImages && response.generatedImages.length > 0) {
+            return response.generatedImages[0].image.imageBytes;
+        }
+        return null;
+
+    } catch (error) {
+        return handleAIError(error);
+    }
+};
+
+export const analyzeSoilComposition = async (
+    imageBase64: string,
+    species: string,
+    location: string
+): Promise<SoilAnalysis | null> => {
+    if (!isAIConfigured()) {
+        throw new Error("AI is not configured. Please set your API key in Settings.");
+    }
+    try {
+        const prompt = `You are a soil scientist specializing in bonsai substrates. Analyze the provided close-up image of a bonsai soil mix. The user states it is for a ${species} bonsai in ${location}. Based on the visual texture, color, and particle shapes:
+1.  Identify the primary components and estimate their percentages. Components can include: Akadama, Pumice, Lava Rock, Organic Compost, Kiryu, Pine Bark, Diatomaceous Earth, Sand, Grit, or Other.
+2.  Assess the overall drainage and water retention properties of the mix.
+3.  Provide a suitability analysis for the specified species and location, considering its water and air requirements.
+4.  Offer actionable suggestions for how this soil mix could be improved for this specific use case.
+
+Generate the response strictly following the provided JSON schema.`;
+
+        const imagePart = { inlineData: { mimeType: 'image/jpeg', data: imageBase64 } };
+        const textPart = { text: prompt };
+
+        const response = await ai!.models.generateContent({
+            model: 'gemini-2.5-flash',
+            contents: { parts: [imagePart, textPart] },
+            config: {
+                responseMimeType: "application/json",
+                responseSchema: soilAnalysisSchema
+            }
+        });
+
+        const jsonText = response.text.trim();
+        if (!jsonText) {
+            console.error("Gemini API returned an empty response for soil analysis.");
+            return null;
+        }
+        return JSON.parse(jsonText) as SoilAnalysis;
+
+    } catch (error) {
+        return handleAIError(error);
+    }
+};
+
+export const generateNebariBlueprint = async (imageBase64: string): Promise<StylingBlueprint | null> => {
+    if (!isAIConfigured()) {
+        throw new Error("AI is not configured. Please set your API key in Settings.");
+    }
+    try {
+        const prompt = `You are a bonsai master specializing in nebari (root flare) development. Analyze the provided image of the base of a bonsai tree. Your goal is to create a visual guide for the user to improve the nebari over several seasons.
+Generate a styling blueprint with annotations showing how to improve the nebari over time. Use annotations like:
+- **PRUNE_LINE**: To indicate a root that should be pruned back to encourage finer roots.
+- **REMOVE_BRANCH**: To mark a large, unsightly, or crossing root for complete removal during the next repotting.
+- **EXPOSE_ROOT**: To outline areas where soil should be carefully removed at the surface to reveal more of the nebari.
+Every annotation must have a clear, concise label explaining the action and its purpose (e.g., 'Prune this thick root to encourage radial growth'). Provide a summary of the overall strategy for nebari development.`;
+
+        const imagePart = { inlineData: { mimeType: 'image/jpeg', data: imageBase64 } };
+        const textPart = { text: prompt };
+
+        const response = await ai!.models.generateContent({
+            model: 'gemini-2.5-flash',
+            contents: { parts: [imagePart, textPart] },
+            config: {
+                responseMimeType: "application/json",
+                responseSchema: stylingBlueprintSchema
+            }
+        });
+
+        const jsonText = response.text.trim();
+        if (!jsonText) {
+            console.error("Gemini API returned an empty response for nebari blueprint.");
+            return null;
+        }
+
+        return JSON.parse(jsonText) as StylingBlueprint;
+
+    } catch (error) {
+        return handleAIError(error);
+    }
+};
+
+export const getProtectionProfile = async (species: string): Promise<Omit<ProtectionProfile, 'alertsEnabled'> | null> => {
+    if (!isAIConfigured()) {
+        throw new Error("AI is not configured. Please set your API key in Settings.");
+    }
+    try {
+        const prompt = `You are a horticultural expert specializing in bonsai. For the bonsai species "${species}", provide its typical environmental tolerance thresholds. Give reasonable, common values for a healthy, established tree.
+        
+Respond strictly in JSON format matching the schema.`;
+        const result = await generate(prompt, protectionProfileSchema);
+        return result as Omit<ProtectionProfile, 'alertsEnabled'>;
+    } catch (error) {
+        return handleAIError(error);
+    }
+};

services/mcpService.ts

@@ -0,0 +1,64 @@
+
+const MCP_SERVER_URL = 'https://black-forest-labs-flux-1-kontext-dev.hf.space/run/FLUX_1_Kontext_Dev_infer';
+
+/**
+ * Edits a bonsai image using the FLUX.1 Kontext MCP tool.
+ * @param imageBase64 The base64 encoded string of the input image.
+ * @param prompt The text prompt describing the desired edit.
+ * @returns A base64 encoded string of the edited image, or null if an error occurs.
+ */
+export const editBonsaiWithKontext = async (
+    imageBase64: string,
+    prompt: string
+): Promise<string | null> => {
+    try {
+        const inputImage = `data:image/jpeg;base64,${imageBase64}`;
+
+        // Based on the provided documentation and common Gradio API structure.
+        // The payload is an object with a 'data' array containing the arguments in order.
+        // The order of arguments is assumed from the Python example: 
+        // input_image, prompt, seed, randomize_seed, guidance_scale
+        const payload = {
+            data: [
+                inputImage,       // input_image
+                prompt,           // prompt
+                -1,               // seed (-1 for random)
+                true,             // randomize_seed
+                2.5,              // guidance_scale
+            ]
+        };
+
+        const response = await fetch(MCP_SERVER_URL, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+        });
+
+        if (!response.ok) {
+            const errorBody = await response.text();
+            console.error("MCP Server Error:", response.status, errorBody);
+            throw new Error(`Request failed with status ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        // Gradio API responses typically wrap the output in a 'data' array.
+        // The edited image is expected to be the first element.
+        if (result && Array.isArray(result.data) && result.data.length > 0) {
+            const outputImage = result.data[0];
+            // The output is often a data URI. We need to extract the base64 part.
+            if (typeof outputImage === 'string' && outputImage.startsWith('data:image/')) {
+                return outputImage.split(',')[1];
+            }
+        }
+        
+        console.error("Invalid response format from MCP server:", result);
+        return null;
+
+    } catch (error) {
+        console.error("Error calling MCP tool:", error);
+        return null;
+    }
+};

tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "paths": {
+      "@/*" :  ["./*"]
+    }
+  }
+}

types.ts

@@ -0,0 +1,308 @@
+
+
+declare const google: {
+  accounts: {
+    id: {
+      initialize: (config: { client_id: string; callback: (response: any) => void; }) => void;
+      renderButton: (
+        parent: HTMLElement,
+        options: { theme?: string; size?: string; type?: string; text?: string, width?: string, logo_alignment?: string }
+      ) => void;
+      prompt: (notification?: any) => void;
+      disableAutoSelect: () => void;
+    };
+  };
+};
+
+declare global {
+  interface Window {
+    google: typeof google;
+  }
+}
+
+
+export enum AppStatus {
+  IDLE = 'IDLE',
+  ANALYZING = 'ANALYZING',
+  SUCCESS = 'SUCCESS',
+  ERROR = 'ERROR',
+}
+
+export type View = 'steward' | 'pests' | 'seasons' | 'tools' | 'garden' | 'healthCheck' | 'designStudio' | 'speciesIdentifier' | 'wiringGuide' | 'soilAnalyzer' | 'nebariDeveloper' | 'potCalculator' | 'sunTracker' | 'fertilizerMixer' | 'soilVolumeCalculator' | 'weatherShield' | 'settings';
+
+export interface UserProfile {
+    id: string;
+    name: string;
+    email: string;
+    picture: string;
+}
+
+
+export enum LogTag {
+    Pruning = 'Pruning',
+    Watering = 'Watering',
+    Fertilizing = 'Fertilizing',
+    Repotting = 'Repotting',
+    Wiring = 'Wiring',
+    PestControl = 'Pest Control',
+    DiseaseControl = 'Disease Control',
+    Observation = 'Observation',
+    Styling = 'Styling',
+    NewGrowth = 'New Growth',
+    HealthDiagnosis = 'Health Diagnosis',
+}
+
+export interface HealthCheckResult {
+    probableCause: string;
+    confidence: 'High' | 'Medium' | 'Low';
+    explanation: string;
+    isPest: boolean;
+    isDisease: boolean;
+    treatmentPlan: {
+        step: number;
+        action: string;
+        details: string;
+    }[];
+    organicAlternatives: string;
+    preventativeMeasures: string;
+}
+
+
+export interface DiaryAIAnalysis {
+    summary: string;
+    healthChange?: number; // e.g., +5, -2, or 0
+    suggestions?: string[];
+}
+
+export interface DiaryLog {
+    id: string; // uuid
+    date: string; // ISO string
+    title: string;
+    notes: string;
+    photos: string[]; // base64 strings without the data URI prefix
+    tags: LogTag[];
+    aiAnalysis?: DiaryAIAnalysis;
+    healthCheckResult?: HealthCheckResult;
+}
+
+export interface ProtectionProfile {
+    minTempC: number;
+    maxTempC: number;
+    maxWindKph: number;
+    alertsEnabled: boolean;
+}
+
+export interface BonsaiTree {
+    id: string; // uuid
+    name: string;
+    species: string;
+    acquiredDate: string; // ISO string
+    source: string; // e.g., Nursery, Collected, Gift
+    location: string; // e.g., San Francisco, CA
+    initialPhoto: string; // base64 string without the data URI prefix
+    notes?: string;
+    logs: DiaryLog[];
+    analysisHistory: { date: string; analysis: BonsaiAnalysis }[];
+    protectionProfile?: ProtectionProfile;
+}
+
+export interface CareTask {
+  week: number;
+  task: string;
+  details: string;
+  toolsNeeded?: string[];
+}
+
+export interface PestAlert {
+  pestOrDisease: string;
+  symptoms:string;
+  treatment: string;
+  severity: 'Low' | 'Medium' | 'High';
+}
+
+export interface StylingSuggestion {
+  technique: 'Pruning' | 'Wiring' | 'Shaping';
+  description: string;
+  area: string;
+}
+
+export interface EnvironmentalFactors {
+  idealLight: string;
+  idealHumidity: string;
+  temperatureRange: string;
+}
+
+export interface WateringAnalysis {
+    frequency: string;
+    method: string;
+    notes: string;
+}
+
+export interface FertilizerRec {
+    phase: 'Spring Growth' | 'Summer Maintenance' | 'Autumn Preparation' | 'Winter Dormancy';
+    type: string;
+    frequency: string;
+    notes: string;
+}
+
+export interface SoilRecipeComponent {
+    name: 'Akadama' | 'Pumice' | 'Lava Rock' | 'Organic Compost' | 'Kiryu' | 'Other';
+    percentage: number;
+    notes: string;
+}
+
+export interface SoilRecipe {
+    components: SoilRecipeComponent[];
+    rationale: string;
+}
+
+export interface PotSuggestion {
+    style: string;
+    size: string;
+    colorPalette: string;
+    rationale:string;
+}
+
+export interface SeasonalTask {
+    task: string;
+    importance: 'High' | 'Medium' | 'Low';
+}
+
+export interface SeasonalGuide {
+    season: 'Spring' | 'Summer' | 'Autumn' | 'Winter';
+    summary: string;
+    tasks: SeasonalTask[];
+}
+
+export interface DiagnosticIssue {
+    issue: string;
+    confidence: 'High' | 'Medium' | 'Low';
+    symptoms: string;
+    solution: string;
+}
+
+export interface PestLibraryEntry {
+    name: string;
+    type: 'Pest' | 'Disease';
+    description: string;
+    symptoms: string[];
+    treatment: {
+        organic: string;
+        chemical: string;
+    };
+}
+
+export interface ToolRecommendation {
+    name: string;
+    category: 'Cutting' | 'Wiring' | 'Repotting' | 'General Care';
+    description: string;
+    level: 'Essential' | 'Recommended' | 'Advanced';
+}
+
+export enum ToolCondition {
+    EXCELLENT = 'Excellent',
+    GOOD = 'Good',
+    NEEDS_SHARPENING = 'Needs Sharpening',
+    NEEDS_OILING = 'Needs Oiling',
+    DAMAGED = 'Damaged'
+}
+
+export interface UserTool extends ToolRecommendation {
+    id: string; // Unique ID for the user's instance of the tool
+    condition: ToolCondition;
+    lastMaintained?: string; // ISO date string
+    notes?: string;
+}
+
+export interface MaintenanceTips {
+    sharpening: string;
+    cleaning: string;
+    storage: string;
+}
+
+export interface BonsaiAnalysis {
+  species: string;
+  healthAssessment: {
+    overallHealth: string;
+    healthScore: number;
+    observations: string[];
+    foliageHealth: string;
+    trunkAndNebariHealth: string;
+    potAndSoilHealth: string;
+  };
+  careSchedule: CareTask[];
+  pestAndDiseaseAlerts: PestAlert[];
+  stylingSuggestions: StylingSuggestion[];
+  environmentalFactors: EnvironmentalFactors;
+  wateringAnalysis: WateringAnalysis;
+  knowledgeNuggets: string[];
+  estimatedAge: string;
+  fertilizerRecommendations: FertilizerRec[];
+  soilRecipe: SoilRecipe;
+  potSuggestion: PotSuggestion;
+  seasonalGuide: SeasonalGuide[];
+  diagnostics: DiagnosticIssue[];
+  pestLibrary: PestLibraryEntry[];
+  toolRecommendations: ToolRecommendation[];
+}
+
+export interface SpeciesIdentification {
+    commonName: string;
+    scientificName: string;
+    confidence: string;
+    reasoning: string;
+    generalCareSummary: string;
+}
+
+export interface SpeciesIdentificationResult {
+    identifications: SpeciesIdentification[];
+}
+
+export interface SoilAnalysisComponent {
+    name: 'Akadama' | 'Pumice' | 'Lava Rock' | 'Organic Compost' | 'Kiryu' | 'Pine Bark' | 'Diatomaceous Earth' | 'Sand' | 'Grit' | 'Other';
+    percentage: number;
+}
+
+export interface SoilAnalysis {
+    components: SoilAnalysisComponent[];
+    drainageRating: 'Poor' | 'Average' | 'Good' | 'Excellent';
+    waterRetention: 'Low' | 'Medium' | 'High';
+    suitabilityAnalysis: string;
+    improvementSuggestions: string;
+}
+
+
+// --- AI Design Studio Blueprint Types ---
+
+export interface SvgPoint {
+    x: number;
+    y: number;
+}
+
+export enum AnnotationType {
+    PruneLine = 'PRUNE_LINE',
+    WireDirection = 'WIRE_DIRECTION',
+    RemoveBranch = 'REMOVE_BRANCH',
+    FoliageRefinement = 'FOLIAGE_REFINEMENT',
+    JinShari = 'JIN_SHARI',
+    TrunkLine = 'TRUNK_LINE',
+    ExposeRoot = 'EXPOSE_ROOT',
+}
+
+export interface StylingAnnotation {
+    type: AnnotationType;
+    points?: SvgPoint[]; // For lines and polygons
+    path?: string; // For complex curves like wiring direction
+    label: string;
+}
+
+export interface StylingBlueprint {
+    annotations: StylingAnnotation[];
+    summary: string;
+    // AI provides coordinates based on a 1000x1000 canvas.
+    // The frontend will scale these to the actual image dimensions.
+    canvas: {
+        width: number;
+        height: number;
+    };
+}

views/AiStewardView.tsx

@@ -0,0 +1,170 @@
+
+
+
+
+
+
+import React, { useState, useCallback, useEffect } from 'react';
+import ImageUploader from '../components/ImageUploader';
+import AnalysisDisplay from '../components/AnalysisDisplay';
+import Spinner from '../components/Spinner';
+import { SparklesIcon, AlertTriangleIcon } from '../components/icons';
+import { analyzeBonsai, getProtectionProfile, isAIConfigured } from '../services/geminiService';
+import type { BonsaiAnalysis, BonsaiTree, View } from '../types';
+import { AppStatus } from '../types';
+
+interface AiStewardViewProps {
+  setActiveView: (view: View) => void;
+}
+
+const AiStewardView: React.FC<AiStewardViewProps> = ({ setActiveView }) => {
+  const [status, setStatus] = useState<AppStatus>(AppStatus.IDLE);
+  const [analysisResult, setAnalysisResult] = useState<BonsaiAnalysis | null>(null);
+  const [error, setError] = useState<string>('');
+  const [currentImage, setCurrentImage] = useState<string>('');
+  const [currentLocation, setCurrentLocation] = useState('');
+  const [prefilledSpecies, setPrefilledSpecies] = useState('');
+  const aiConfigured = isAIConfigured();
+
+  useEffect(() => {
+    const species = window.sessionStorage.getItem('prefilled-species');
+    if (species) {
+      setPrefilledSpecies(species);
+      window.sessionStorage.removeItem('prefilled-species');
+    }
+  }, []);
+
+  const handleAnalyze = useCallback(async (imageBase64: string, species: string, location: string) => {
+    setStatus(AppStatus.ANALYZING);
+    setError('');
+    setAnalysisResult(null);
+    setCurrentImage(imageBase64);
+    setCurrentLocation(location);
+
+    try {
+      const result = await analyzeBonsai(imageBase64, species, location);
+      if (result) {
+        setAnalysisResult(result);
+        setStatus(AppStatus.SUCCESS);
+      } else {
+        throw new Error('Failed to get analysis. The AI may be busy, or there was an issue with the request. Please try again.');
+      }
+    } catch (e: any) {
+      setError(e.message);
+      setStatus(AppStatus.ERROR);
+    }
+  }, []);
+
+  const handleSaveToDiary = async () => {
+    try {
+      if (!analysisResult || !currentImage || !currentLocation) {
+        alert("Cannot save. Analysis data is missing.");
+        return;
+      }
+
+      const treeName = window.prompt("What would you like to name this tree in your garden?", analysisResult.species);
+      if (!treeName) return; // User cancelled
+
+      // Fetch the protection profile for the new tree
+      const protectionProfileData = await getProtectionProfile(analysisResult.species);
+
+      const newTree: BonsaiTree = {
+        id: `tree-${Date.now()}`,
+        name: treeName,
+        species: analysisResult.species,
+        acquiredDate: new Date().toISOString(),
+        source: "AI Steward Analysis",
+        location: currentLocation,
+        initialPhoto: currentImage,
+        logs: [],
+        analysisHistory: [{ date: new Date().toISOString(), analysis: analysisResult }],
+        protectionProfile: protectionProfileData ? { ...protectionProfileData, alertsEnabled: true } : undefined,
+      };
+
+      const storageKey = `yuki-app-bonsai-diary-trees`;
+      const existingTreesJSON = window.localStorage.getItem(storageKey);
+      const existingTrees: BonsaiTree[] = existingTreesJSON ? JSON.parse(existingTreesJSON) : [];
+      const updatedTrees = [...existingTrees, newTree];
+      window.localStorage.setItem(storageKey, JSON.stringify(updatedTrees));
+      window.localStorage.setItem('yuki-bonsai-diary-newly-added-tree-id', newTree.id);
+      setActiveView('garden');
+
+    } catch (error) {
+        console.error("Failed to save tree to garden:", error);
+        alert("Could not save the tree to your garden. An unexpected error occurred. Please check browser permissions for storage and try again.");
+    }
+  };
+
+
+  const handleReset = () => {
+    setStatus(AppStatus.IDLE);
+    setAnalysisResult(null);
+    setError('');
+    setCurrentImage('');
+    setCurrentLocation('');
+    setPrefilledSpecies('');
+  };
+
+  const renderContent = () => {
+    switch (status) {
+      case AppStatus.ANALYZING:
+        return <div className="flex justify-center items-center h-full"><Spinner /></div>;
+      case AppStatus.SUCCESS:
+        return analysisResult ? <AnalysisDisplay analysis={analysisResult} onReset={handleReset} onSaveToDiary={handleSaveToDiary} treeImageBase64={currentImage} /> : null;
+      case AppStatus.ERROR:
+         return (
+          <div className="text-center p-8 bg-white rounded-lg shadow-lg border border-red-200 max-w-md mx-auto">
+            <h3 className="text-xl font-semibold text-red-700">An Error Occurred</h3>
+            <p className="text-stone-600 mt-2">{error}</p>
+            <button
+              onClick={handleReset}
+              className="mt-6 bg-green-700 text-white font-semibold py-2 px-6 rounded-lg hover:bg-green-600 transition-colors"
+            >
+              Try Again
+            </button>
+          </div>
+        );
+      case AppStatus.IDLE:
+      default:
+        return (
+          <>
+            <ImageUploader onAnalyze={handleAnalyze} isAnalyzing={false} defaultSpecies={prefilledSpecies} disabled={!aiConfigured}/>
+            {!aiConfigured && (
+              <div className="mt-6 p-4 bg-yellow-50 text-yellow-800 rounded-lg border border-yellow-200 text-center max-w-2xl mx-auto">
+                <div className="flex items-center justify-center gap-2">
+                  <AlertTriangleIcon className="w-5 h-5"/>
+                  <h3 className="font-semibold">AI Features Disabled</h3>
+                </div>
+                <p className="text-sm mt-1">
+                  Please set your Gemini API key in the{' '}
+                  <button onClick={() => setActiveView('settings')} className="font-bold underline hover:text-yellow-900">
+                    Settings page
+                  </button>
+                  {' '}to enable this feature.
+                </p>
+              </div>
+            )}
+          </>
+        );
+    }
+  };
+
+  return (
+    <div className="space-y-8">
+        <header className="text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+                <SparklesIcon className="w-8 h-8 text-green-600" />
+                New Tree Analysis
+            </h2>
+            <p className="mt-4 text-lg leading-8 text-stone-600 max-w-2xl mx-auto">
+                Welcome a new tree to your collection. Get an instant, expert analysis from Yuki, our AI Bonsai Sensei.
+            </p>
+        </header>
+        <div className="w-full">
+            {renderContent()}
+        </div>
+    </div>
+  );
+};
+
+export default AiStewardView;

views/BonsaiDiaryView.tsx

@@ -0,0 +1,753 @@
+
+
+
+
+
+
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { BookUserIcon, PlusCircleIcon, ArrowLeftIcon, HistoryIcon, SparklesIcon, GalleryHorizontalIcon, ImagePlusIcon, Trash2Icon, BugIcon, WrenchIcon, BonsaiIcon, CameraIcon, CalendarIcon, SunIcon, WindIcon, SnowflakeIcon, SunriseIcon, LeafIcon, UmbrellaIcon, AlertTriangleIcon } from '../components/icons';
+import type { View, BonsaiTree, DiaryLog, BonsaiAnalysis, SeasonalGuide, ProtectionProfile } from '../types';
+import { LogTag } from '../types';
+import { analyzeDiaryLog, analyzeGrowthProgression, analyzeFollowUp, generateSeasonalGuide, getProtectionProfile, isAIConfigured } from '../services/geminiService';
+import Spinner from '../components/Spinner';
+import { useLocalStorage } from '../hooks/useLocalStorage';
+import AnalysisDisplay from '../components/AnalysisDisplay';
+
+// --- Main Component ---
+const BonsaiDiaryView: React.FC<{ setActiveView: (view: View) => void }> = ({ setActiveView }) => {
+    const [trees, setTrees] = useLocalStorage<BonsaiTree[]>('bonsai-diary-trees', []);
+    const [selectedTreeId, setSelectedTreeId] = useState<string | null>(null);
+    const [isAddTreeModalOpen, setAddTreeModalOpen] = useState(false);
+    const [newlyAddedId, setNewlyAddedId] = useState<string|null>(null);
+    const aiConfigured = isAIConfigured();
+
+    useEffect(() => {
+        const newId = window.localStorage.getItem('yuki-bonsai-diary-newly-added-tree-id');
+        if (newId) {
+            setNewlyAddedId(newId);
+            setSelectedTreeId(newId);
+            window.localStorage.removeItem('yuki-bonsai-diary-newly-added-tree-id');
+        }
+    }, []);
+
+    const selectedTree = trees.find(t => t.id === selectedTreeId);
+
+    const handleAddTree = async (newTreeData: Omit<BonsaiTree, 'id' | 'logs' | 'analysisHistory'>) => {
+        const newTree: BonsaiTree = {
+            ...newTreeData,
+            id: `tree-${Date.now()}`,
+            logs: [],
+            analysisHistory: [],
+        };
+        
+        setTrees(prev => [...prev, newTree]);
+        
+        // Asynchronously fetch and update the protection profile
+        if (aiConfigured) {
+          const profile = await getProtectionProfile(newTree.species);
+          if(profile) {
+              const treeWithProfile = { ...newTree, protectionProfile: { ...profile, alertsEnabled: true }};
+              setTrees(prev => prev.map(t => t.id === newTree.id ? treeWithProfile : t));
+          }
+        }
+    };
+
+    const handleUpdateTree = (updatedTree: BonsaiTree) => {
+        setTrees(prev => prev.map(t => t.id === updatedTree.id ? updatedTree : t));
+    };
+
+    const handleDeleteTree = (treeId: string) => {
+        if (window.confirm("Are you sure you want to delete this tree and all its logs? This cannot be undone.")) {
+            setTrees(prev => prev.filter(t => t.id !== treeId));
+            setSelectedTreeId(null);
+        }
+    };
+    
+    return (
+        <div className="space-y-8 max-w-6xl mx-auto">
+            <header className="text-center">
+                <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+                  <BookUserIcon className="w-8 h-8 text-blue-600" />
+                  My Garden
+                </h2>
+                <p className="mt-4 text-lg leading-8 text-stone-600">
+                  Chronicle the life and growth of your personal trees.
+                </p>
+            </header>
+
+            {selectedTree ? (
+                <TreeDetail 
+                    tree={selectedTree}
+                    onBack={() => {
+                        setSelectedTreeId(null);
+                        if (newlyAddedId) {
+                            setNewlyAddedId(null);
+                        }
+                    }}
+                    onUpdate={handleUpdateTree}
+                    onDelete={handleDeleteTree}
+                    setActiveView={setActiveView}
+                    showInitialReportOnLoad={newlyAddedId === selectedTree.id}
+                    isAIConfigured={aiConfigured}
+                />
+            ) : (
+                <>
+                    <div className="flex justify-end">
+                        <button onClick={() => setAddTreeModalOpen(true)} className="flex items-center gap-2 rounded-md bg-green-700 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-600">
+                            <PlusCircleIcon className="w-5 h-5" />
+                            Add New Tree
+                        </button>
+                    </div>
+                    <TreeList trees={trees} onSelectTree={setSelectedTreeId} />
+                </>
+            )}
+
+            {isAddTreeModalOpen && (
+                <Modal onClose={() => setAddTreeModalOpen(false)} title="Add a New Bonsai to Your Garden">
+                    <AddTreeForm
+                        onAddTree={handleAddTree}
+                        onClose={() => setAddTreeModalOpen(false)}
+                    />
+                </Modal>
+            )}
+        </div>
+    );
+};
+
+// --- Sub-components ---
+
+const TreeList: React.FC<{trees: BonsaiTree[], onSelectTree: (id: string) => void}> = ({ trees, onSelectTree }) => {
+    if (trees.length === 0) {
+        return (
+            <div className="text-center bg-white rounded-xl shadow-md border border-stone-200 p-12">
+                <BonsaiIcon className="mx-auto h-16 w-16 text-stone-400" />
+                <h3 className="mt-4 text-xl font-semibold text-stone-800">Your Garden is Empty</h3>
+                <p className="mt-2 text-stone-600">Click "Add New Tree" or use the "New Tree Analysis" to get started.</p>
+            </div>
+        );
+    }
+    return (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {trees.map(tree => (
+                <div key={tree.id} className="bg-white rounded-xl shadow-md border border-stone-200 overflow-hidden flex flex-col group cursor-pointer" onClick={() => onSelectTree(tree.id)}>
+                    <img src={`data:image/jpeg;base64,${tree.initialPhoto}`} alt={tree.name} className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" />
+                    <div className="p-4 flex-grow flex flex-col">
+                        <h3 className="text-lg font-bold text-stone-900">{tree.name}</h3>
+                        <p className="text-sm text-stone-600">{tree.species}</p>
+                        <div className="mt-auto pt-4 text-xs text-stone-500">
+                            <p>Acquired: {new Date(tree.acquiredDate).toLocaleDateString()}</p>
+                            <p>{tree.logs.length} log entries. {tree.analysisHistory.length} analysis reports.</p>
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+const TreeDetail: React.FC<{tree: BonsaiTree, onBack: () => void, onUpdate: (tree: BonsaiTree) => void, onDelete: (id: string) => void, setActiveView: (view: View) => void, showInitialReportOnLoad: boolean, isAIConfigured: boolean}> = ({ tree, onBack, onUpdate, onDelete, setActiveView, showInitialReportOnLoad, isAIConfigured }) => {
+    const [isAddLogModalOpen, setAddLogModalOpen] = useState(false);
+    const [isGrowthModalOpen, setGrowthModalOpen] = useState(false);
+    const [activeReport, setActiveReport] = useState<BonsaiAnalysis | null>(null);
+    const [isAnalyzingFollowUp, setIsAnalyzingFollowUp] = useState(false);
+    const followUpPhotoInputRef = useRef<HTMLInputElement>(null);
+    const [followUpError, setFollowUpError] = useState('');
+
+    const [isSeasonalPlanOpen, setSeasonalPlanOpen] = useState(false);
+    
+    useEffect(() => {
+        if (showInitialReportOnLoad && tree.analysisHistory.length > 0) {
+            setActiveReport(tree.analysisHistory[0].analysis);
+        }
+    }, [showInitialReportOnLoad, tree.analysisHistory]);
+
+    const handleAddLog = async (newLogData: Omit<DiaryLog, 'id'>, analyze: boolean) => {
+        let newLog: DiaryLog = { ...newLogData, id: `log-${Date.now()}`};
+        
+        if (analyze && newLog.photos.length > 0 && isAIConfigured) {
+            try {
+                const previousLogWithPhoto = [...tree.logs].reverse().find(l => l.photos.length > 0);
+                const analysis = await analyzeDiaryLog(tree.species, newLog.photos, previousLogWithPhoto?.photos[0]);
+                if (analysis) {
+                    newLog.aiAnalysis = analysis;
+                }
+            } catch (e: any) {
+                alert(`Could not get AI analysis: ${e.message}`);
+            }
+        }
+        
+        const updatedTree = { ...tree, logs: [...tree.logs, newLog].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) };
+        onUpdate(updatedTree);
+    };
+
+    const handleRequestFollowUp = () => {
+        setFollowUpError('');
+        followUpPhotoInputRef.current?.click();
+    };
+
+    const handleFollowUpPhotoSelected = async (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (!file) return;
+
+        setIsAnalyzingFollowUp(true);
+
+        const reader = new FileReader();
+        reader.onloadend = async () => {
+            const imageBase64 = (reader.result as string).split(',')[1];
+            const latestAnalysis = tree.analysisHistory[0]?.analysis;
+            
+            if (!latestAnalysis) {
+                setFollowUpError("No initial analysis found. Please use the AI Steward first.");
+                setIsAnalyzingFollowUp(false);
+                return;
+            }
+            try {
+                const result = await analyzeFollowUp(imageBase64, latestAnalysis, tree.species, tree.location);
+
+                if (result) {
+                    const newAnalysisEntry = { date: new Date().toISOString(), analysis: result };
+                    const updatedTree = { ...tree, analysisHistory: [newAnalysisEntry, ...tree.analysisHistory] };
+                    onUpdate(updatedTree);
+                    setActiveReport(result);
+                } else {
+                    throw new Error("Failed to get follow-up analysis. Please try again.");
+                }
+            } catch (e: any) {
+                setFollowUpError(e.message);
+            } finally {
+                setIsAnalyzingFollowUp(false);
+            }
+        };
+        reader.readAsDataURL(file);
+        event.target.value = '';
+    };
+
+
+    return (
+        <div className="bg-white rounded-xl shadow-lg border border-stone-200 p-6 space-y-6">
+            <input type="file" ref={followUpPhotoInputRef} onChange={handleFollowUpPhotoSelected} accept="image/*" className="sr-only"/>
+            <div className="flex justify-between items-start">
+                <div>
+                    <button onClick={onBack} className="flex items-center gap-2 text-sm font-semibold text-green-700 hover:text-green-600 mb-2">
+                        <ArrowLeftIcon className="w-5 h-5"/> Back to All Trees
+                    </button>
+                    <h3 className="text-3xl font-bold text-stone-900">{tree.name}</h3>
+                    <p className="text-md text-stone-600">{tree.species}</p>
+                </div>
+                <div className="flex flex-wrap gap-2 justify-end">
+                     <button onClick={handleRequestFollowUp} disabled={isAnalyzingFollowUp || tree.analysisHistory.length === 0 || !isAIConfigured} className="flex items-center gap-2 text-sm font-semibold bg-purple-100 text-purple-700 hover:bg-purple-200 px-3 py-2 rounded-md transition-colors disabled:bg-stone-200 disabled:text-stone-500 disabled:cursor-not-allowed">
+                        {isAnalyzingFollowUp ? <Spinner text='' /> : <><CameraIcon className="w-4 h-4" /> Request Follow-up</>}
+                    </button>
+                    <button onClick={() => setSeasonalPlanOpen(true)} disabled={!isAIConfigured} className="flex items-center gap-2 text-sm font-semibold bg-indigo-100 text-indigo-700 hover:bg-indigo-200 px-3 py-2 rounded-md transition-colors disabled:bg-stone-200 disabled:text-stone-500 disabled:cursor-not-allowed">
+                        <CalendarIcon className="w-4 h-4"/> View Seasonal Plan
+                    </button>
+                     <button onClick={() => setGrowthModalOpen(true)} className="flex items-center gap-2 text-sm font-semibold bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-2 rounded-md transition-colors" disabled={tree.logs.filter(l => l.photos.length > 0).length < 2 || !isAIConfigured}>
+                        <GalleryHorizontalIcon className="w-4 h-4" /> AI Growth Visualizer
+                    </button>
+                    <button onClick={() => setAddLogModalOpen(true)} className="flex items-center gap-2 text-sm font-semibold bg-green-100 text-green-700 hover:bg-green-200 px-3 py-2 rounded-md transition-colors">
+                        <PlusCircleIcon className="w-4 h-4" /> New Log Entry
+                    </button>
+                    <button onClick={() => onDelete(tree.id)} className="flex items-center justify-center bg-red-100 text-red-700 hover:bg-red-200 p-2 rounded-md transition-colors">
+                        <Trash2Icon className="w-4 h-4" />
+                    </button>
+                </div>
+            </div>
+            
+            {!isAIConfigured && (
+                 <div className="p-3 bg-yellow-50 text-yellow-800 rounded-lg border border-yellow-200 text-center text-sm">
+                    Some AI features like Follow-up Analysis and Seasonal Plans are disabled. Please set your Gemini API key in the{' '}
+                    <button onClick={() => setActiveView('settings')} className="font-bold underline hover:text-yellow-900">
+                        Settings page
+                    </button>.
+                </div>
+            )}
+            {followUpError && <p className="text-sm text-red-600 p-3 bg-red-50 rounded-lg text-center">{followUpError}</p>}
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="space-y-6">
+                    {tree.analysisHistory.length > 0 && (
+                        <div className="bg-stone-50 p-4 rounded-lg border border-stone-200">
+                            <h4 className="text-lg font-semibold text-stone-800 mb-2">Analysis History</h4>
+                            <div className="flex flex-wrap gap-2">
+                                {tree.analysisHistory.map((entry, index) => (
+                                    <button key={index} onClick={() => setActiveReport(entry.analysis)} className="text-sm font-medium bg-white border border-stone-300 px-3 py-1.5 rounded-md hover:bg-stone-100 hover:border-stone-400 transition-colors">
+                                        Report from {new Date(entry.date).toLocaleDateString()}
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                    <ProtectionSettings tree={tree} onUpdate={onUpdate} isAIConfigured={isAIConfigured} />
+                </div>
+                 {/* Timeline */}
+                <div className="relative pl-8 border-l-2 border-stone-100">
+                     <div className="absolute left-0 top-0 -translate-x-1/2 w-0.5 h-full bg-stone-200"></div>
+                     {tree.logs.length > 0 ? tree.logs.map(log => <LogEntry key={log.id} log={log} setActiveView={setActiveView} />) : (
+                        <div className="text-center py-10">
+                            <HistoryIcon className="mx-auto h-12 w-12 text-stone-400" />
+                            <p className="mt-2 text-stone-600">No log entries yet. Add one to start the timeline!</p>
+                        </div>
+                     )}
+                </div>
+            </div>
+
+            {isAddLogModalOpen && (
+                <Modal onClose={() => setAddLogModalOpen(false)} title={`New Log for ${tree.name}`}>
+                    <AddLogForm onAddLog={handleAddLog} onClose={() => setAddLogModalOpen(false)} isAIConfigured={isAIConfigured}/>
+                </Modal>
+            )}
+             {isGrowthModalOpen && (
+                <Modal onClose={() => setGrowthModalOpen(false)} title="AI Growth Visualizer">
+                    <GrowthVisualizer tree={tree} onClose={() => setGrowthModalOpen(false)} />
+                </Modal>
+            )}
+            {activeReport && (
+                <Modal onClose={() => setActiveReport(null)} title={`Analysis for ${tree.name}`}>
+                     <div className="max-h-[80vh] overflow-y-auto -m-6 p-1">
+                        <div className="p-6">
+                            <AnalysisDisplay analysis={activeReport} isReadonly={true} treeImageBase64={tree.initialPhoto} />
+                        </div>
+                    </div>
+                </Modal>
+            )}
+             {isSeasonalPlanOpen && (
+                <Modal onClose={() => setSeasonalPlanOpen(false)} title={`Seasonal Plan for ${tree.name}`}>
+                    <SeasonalPlanModal tree={tree} onClose={() => setSeasonalPlanOpen(false)} isAIConfigured={isAIConfigured} />
+                </Modal>
+            )}
+        </div>
+    )
+};
+
+const ProtectionSettings: React.FC<{tree: BonsaiTree, onUpdate: (tree: BonsaiTree) => void, isAIConfigured: boolean}> = ({ tree, onUpdate, isAIConfigured }) => {
+    
+    const handleProfileChange = (field: keyof ProtectionProfile, value: any) => {
+        const updatedProfile = {
+            ...tree.protectionProfile,
+            minTempC: tree.protectionProfile?.minTempC ?? 0,
+            maxTempC: tree.protectionProfile?.maxTempC ?? 40,
+            maxWindKph: tree.protectionProfile?.maxWindKph ?? 50,
+            alertsEnabled: tree.protectionProfile?.alertsEnabled ?? true,
+            [field]: value,
+        };
+        onUpdate({ ...tree, protectionProfile: updatedProfile });
+    };
+
+    if (!tree.protectionProfile) {
+        return (
+            <div className="bg-stone-50 p-4 rounded-lg border border-stone-200 text-center">
+                {isAIConfigured ? <Spinner text="Fetching protection profile..." /> : <p className="text-sm text-stone-500">Protection profile generation disabled. Set API key in Settings.</p>}
+            </div>
+        );
+    }
+    
+    return (
+        <div className="bg-stone-50 p-4 rounded-lg border border-stone-200">
+            <div className="flex justify-between items-center mb-3">
+                <h4 className="text-lg font-semibold text-stone-800 flex items-center gap-2"><UmbrellaIcon className="w-5 h-5 text-blue-600"/> Weather Shield Settings</h4>
+                <input type="checkbox" checked={tree.protectionProfile.alertsEnabled} onChange={e => handleProfileChange('alertsEnabled', e.target.checked)} className="h-5 w-5 rounded text-blue-600 focus:ring-blue-500" />
+            </div>
+            <div className="space-y-3 text-sm">
+                <div className="flex items-center justify-between">
+                    <label htmlFor="minTemp">Min Temp (°C)</label>
+                    <input type="number" id="minTemp" value={tree.protectionProfile.minTempC} onChange={e => handleProfileChange('minTempC', Number(e.target.value))} className="w-20 p-1 border rounded-md text-center" />
+                </div>
+                <div className="flex items-center justify-between">
+                    <label htmlFor="maxTemp">Max Temp (°C)</label>
+                    <input type="number" id="maxTemp" value={tree.protectionProfile.maxTempC} onChange={e => handleProfileChange('maxTempC', Number(e.target.value))} className="w-20 p-1 border rounded-md text-center" />
+                </div>
+                <div className="flex items-center justify-between">
+                    <label htmlFor="maxWind">Max Wind (km/h)</label>
+                    <input type="number" id="maxWind" value={tree.protectionProfile.maxWindKph} onChange={e => handleProfileChange('maxWindKph', Number(e.target.value))} className="w-20 p-1 border rounded-md text-center" />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+
+const LogEntry: React.FC<{log: DiaryLog, setActiveView: (view: View) => void}> = ({log, setActiveView}) => {
+    const tagLinks: Partial<Record<LogTag, {icon: React.FC<any>, view: View}>> = {
+        [LogTag.PestControl]: { icon: BugIcon, view: 'pests' },
+        [LogTag.DiseaseControl]: { icon: BugIcon, view: 'pests' },
+        [LogTag.Wiring]: { icon: WrenchIcon, view: 'tools' },
+        [LogTag.Pruning]: { icon: WrenchIcon, view: 'tools' },
+        [LogTag.Repotting]: { icon: WrenchIcon, view: 'tools' },
+    };
+
+    return (
+         <div className="relative mb-8 pl-4">
+            <div className="absolute -left-[9px] top-1.5 w-5 h-5 bg-green-600 rounded-full border-4 border-white"></div>
+            <p className="text-sm font-semibold text-stone-500">{new Date(log.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
+            <h4 className="text-lg font-bold text-stone-800">{log.title}</h4>
+            
+            {log.aiAnalysis && (
+                <div className="my-3 p-3 bg-green-50 border-l-4 border-green-500 rounded-r-lg">
+                    <div className="flex items-center gap-2 text-green-800 font-bold">
+                        <SparklesIcon className="w-5 h-5" />
+                        <span>Yuki's Analysis</span>
+                    </div>
+                    <p className="text-sm text-green-700 mt-1">{log.aiAnalysis.summary}</p>
+                    {log.aiAnalysis.suggestions && log.aiAnalysis.suggestions.map((s, i) => (
+                        <p key={i} className="text-sm text-green-700 mt-1 italic">Suggestion: {s}</p>
+                    ))}
+                </div>
+            )}
+
+            {log.healthCheckResult && (
+                 <div className="my-3 p-4 bg-amber-50 border-l-4 border-amber-500 rounded-r-lg">
+                    <div className="flex items-center gap-2 text-amber-800 font-bold">
+                        <SparklesIcon className="w-5 h-5" />
+                        <span>Health Check Diagnosis</span>
+                    </div>
+                    <p className="text-sm text-amber-900 mt-1 font-semibold">Probable Cause: {log.healthCheckResult.probableCause} ({log.healthCheckResult.confidence} Confidence)</p>
+                    <p className="text-sm text-amber-800 mt-1">{log.healthCheckResult.explanation}</p>
+                </div>
+            )}
+            
+            <p className="text-stone-600 mt-2 whitespace-pre-wrap">{log.notes}</p>
+
+            {log.photos.length > 0 && (
+                <div className="mt-3 grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
+                    {log.photos.map((photo, i) => (
+                        <img key={i} src={`data:image/jpeg;base64,${photo}`} alt={`Log entry ${i+1}`} className="rounded-md object-cover aspect-square" />
+                    ))}
+                </div>
+            )}
+            
+            <div className="mt-3 flex flex-wrap items-center gap-2">
+                {log.tags.map(tag => {
+                     const link = tagLinks[tag];
+                     return (
+                        <div key={tag} className="flex items-center bg-stone-100 text-stone-700 text-xs font-medium px-2.5 py-1 rounded-full">
+                            <span>{tag}</span>
+                            {link && (
+                                <button onClick={() => setActiveView(link.view)} className="ml-1.5 p-0.5 rounded-full hover:bg-stone-300" title={`Go to ${link.view}`}>
+                                    <link.icon className="w-3 h-3"/>
+                                </button>
+                            )}
+                        </div>
+                     )
+                })}
+            </div>
+        </div>
+    );
+}
+
+const SeasonalPlanModal: React.FC<{ tree: BonsaiTree, onClose: () => void, isAIConfigured: boolean }> = ({ tree, onClose, isAIConfigured }) => {
+    const [guideData, setGuideData] = useState<SeasonalGuide[] | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState('');
+
+    useEffect(() => {
+        const fetchGuide = async () => {
+            setIsLoading(true);
+            setError('');
+
+            const latestAnalysis = tree.analysisHistory[0]?.analysis;
+            // Use the guide from the analysis if it exists
+            if (latestAnalysis && latestAnalysis.seasonalGuide && latestAnalysis.seasonalGuide.length > 0) {
+                setGuideData(latestAnalysis.seasonalGuide);
+                setIsLoading(false);
+                return;
+            }
+            
+            // If no cached guide, check if AI is configured before trying to generate
+            if (!isAIConfigured) {
+                setError("A seasonal guide was not found in your latest analysis. Please set an API key in Settings to generate a new one.");
+                setIsLoading(false);
+                return;
+            }
+
+            // Fallback to generating if not found in analysis
+            try {
+                const result = await generateSeasonalGuide(tree.species, tree.location);
+                if (result) {
+                    setGuideData(result);
+                } else {
+                    throw new Error("Failed to get seasonal guide from the AI.");
+                }
+            } catch (e: any) {
+                setError(e.message);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        fetchGuide();
+    }, [tree, isAIConfigured]);
+
+    const seasonIcons: { [key: string]: React.FC<React.SVGProps<SVGSVGElement>> } = {
+        Spring: SunriseIcon,
+        Summer: SunIcon,
+        Autumn: WindIcon,
+        Winter: SnowflakeIcon,
+    };
+
+    return (
+        <div className="max-h-[70vh] overflow-y-auto pr-2">
+            {isLoading && <Spinner text="Yuki is reading the almanac..." />}
+            {error && <p className="text-center text-red-600 p-4 bg-red-50 rounded-md">{error}</p>}
+            {guideData && (
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {guideData.sort((a,b) => ['Spring', 'Summer', 'Autumn', 'Winter'].indexOf(a.season) - ['Spring', 'Summer', 'Autumn', 'Winter'].indexOf(b.season)).map(season => {
+                        const Icon = seasonIcons[season.season] || LeafIcon;
+                        return (
+                            <div key={season.season} className="bg-white rounded-xl shadow-md border border-stone-200 p-6">
+                                <div className="flex items-center gap-3 mb-4">
+                                    <Icon className="w-7 h-7 text-green-700" />
+                                    <h3 className="text-xl font-semibold text-stone-800">{season.season}</h3>
+                                </div>
+                                <div className="space-y-3 text-stone-600">
+                                    <p className="italic text-stone-600 mb-4">{season.summary}</p>
+                                    <ul className="space-y-2">
+                                        {season.tasks.map(task => (
+                                            <li key={task.task} className="flex items-center justify-between text-sm">
+                                                <span>{task.task}</span>
+                                                <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${task.importance === 'High' ? 'bg-red-100 text-red-800' : task.importance === 'Medium' ? 'bg-yellow-100 text-yellow-800' : 'bg-blue-100 text-blue-800'}`}>{task.importance}</span>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </div>
+                            </div>
+                        )
+                    })}
+                </div>
+            )}
+        </div>
+    );
+};
+
+
+// --- Forms and Modals ---
+
+const AddTreeForm: React.FC<{onAddTree: (tree: Omit<BonsaiTree, 'id' | 'logs' | 'analysisHistory'>) => void, onClose: () => void}> = ({onAddTree, onClose}) => {
+    const [name, setName] = useState('');
+    const [species, setSpecies] = useState('');
+    const [location, setLocation] = useState('');
+    const [acquiredDate, setAcquiredDate] = useState(new Date().toISOString().split('T')[0]);
+    const [source, setSource] = useState('');
+    const [initialPhoto, setInitialPhoto] = useState<string>('');
+    const [notes, setNotes] = useState('');
+    const [error, setError] = useState('');
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onloadend = () => setInitialPhoto((reader.result as string).split(',')[1]);
+            reader.readAsDataURL(file);
+        }
+    };
+    
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!name || !species || !acquiredDate || !initialPhoto || !location) {
+            setError('Please fill out all required fields and upload an initial photo.');
+            return;
+        }
+        onAddTree({ name, species, acquiredDate, source, initialPhoto, notes, location });
+        onClose();
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <input type="text" placeholder="Tree Name (e.g., 'My Juniper')" value={name} onChange={e => setName(e.target.value)} required className="w-full p-2 border rounded-md" />
+                <input type="text" placeholder="Species (e.g., 'Juniperus Procumbens Nana')" value={species} onChange={e => setSpecies(e.target.value)} required className="w-full p-2 border rounded-md" />
+                 <input type="text" placeholder="Location (e.g., 'San Francisco, CA')" value={location} onChange={e => setLocation(e.target.value)} required className="w-full p-2 border rounded-md" />
+                <input type="text" placeholder="Source (e.g., 'Local Nursery')" value={source} onChange={e => setSource(e.target.value)} className="w-full p-2 border rounded-md" />
+            </div>
+             <input type="date" value={acquiredDate} onChange={e => setAcquiredDate(e.target.value)} required className="w-full p-2 border rounded-md" />
+            <textarea placeholder="Initial notes..." value={notes} onChange={e => setNotes(e.target.value)} className="w-full p-2 border rounded-md" rows={3}></textarea>
+            <div>
+                <label className="block text-sm font-medium text-stone-700 mb-1">Initial Photo (Required)</label>
+                <div onClick={() => fileInputRef.current?.click()} className="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-stone-300 border-dashed rounded-md cursor-pointer">
+                    <div className="space-y-1 text-center">
+                        {initialPhoto ? <img src={`data:image/jpeg;base64,${initialPhoto}`} className="mx-auto h-24 w-auto rounded-md"/> : <ImagePlusIcon className="mx-auto h-12 w-12 text-stone-400" />}
+                        <p className="text-sm text-stone-600">Click to upload an image</p>
+                    </div>
+                </div>
+                <input type="file" ref={fileInputRef} onChange={handleFileChange} accept="image/*" className="sr-only" required/>
+            </div>
+            {error && <p className="text-red-500 text-sm">{error}</p>}
+            <div className="flex justify-end gap-2">
+                <button type="button" onClick={onClose} className="bg-stone-200 text-stone-700 px-4 py-2 rounded-md">Cancel</button>
+                <button type="submit" className="bg-green-700 text-white px-4 py-2 rounded-md">Add Tree</button>
+            </div>
+        </form>
+    );
+};
+
+const AddLogForm: React.FC<{onAddLog: (log: Omit<DiaryLog, 'id'>, analyze: boolean) => void, onClose: () => void, isAIConfigured: boolean}> = ({onAddLog, onClose, isAIConfigured}) => {
+    const [date, setDate] = useState(new Date().toISOString().split('T')[0]);
+    const [title, setTitle] = useState('');
+    const [notes, setNotes] = useState('');
+    const [photos, setPhotos] = useState<string[]>([]);
+    const [tags, setTags] = useState<LogTag[]>([]);
+    const [requestAnalysis, setRequestAnalysis] = useState(true);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const [error, setError] = useState('');
+
+     const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const files = e.target.files;
+        if (files) {
+            const filePromises = Array.from(files).map(file => {
+                return new Promise<string>((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.onloadend = () => resolve((reader.result as string).split(',')[1]);
+                    reader.onerror = reject;
+                    reader.readAsDataURL(file);
+                });
+            });
+            Promise.all(filePromises).then(base64Photos => setPhotos(p => [...p, ...base64Photos]));
+        }
+    };
+
+    const handleTagToggle = (tag: LogTag) => {
+        setTags(prev => prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag]);
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!title || !date) {
+            setError('Please add a title and date.');
+            return;
+        }
+        onAddLog({ date, title, notes, photos, tags }, requestAnalysis);
+        onClose();
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <input type="text" placeholder="Log Title (e.g., 'Spring Pruning')" value={title} onChange={e => setTitle(e.target.value)} required className="w-full p-2 border rounded-md" />
+                <input type="date" value={date} onChange={e => setDate(e.target.value)} required className="w-full p-2 border rounded-md" />
+            </div>
+            <textarea placeholder="Notes about today's activity or observations..." value={notes} onChange={e => setNotes(e.target.value)} className="w-full p-2 border rounded-md" rows={4}></textarea>
+            
+            <div>
+                <label className="block text-sm font-medium text-stone-700 mb-1">Photos</label>
+                 <div onClick={() => fileInputRef.current?.click()} className="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-stone-300 border-dashed rounded-md cursor-pointer">
+                    <div className="space-y-1 text-center">
+                        <ImagePlusIcon className="mx-auto h-12 w-12 text-stone-400" />
+                        <p className="text-sm text-stone-600">Click to upload images</p>
+                    </div>
+                </div>
+                <input type="file" ref={fileInputRef} onChange={handleFileChange} accept="image/*" multiple className="sr-only"/>
+                {photos.length > 0 && <div className="mt-2 text-sm text-stone-600">{photos.length} photo(s) selected.</div>}
+            </div>
+            
+             <div>
+                <label className="block text-sm font-medium text-stone-700 mb-1">Tags</label>
+                <div className="flex flex-wrap gap-2">
+                    {Object.values(LogTag).map(tag => (
+                        <button type="button" key={tag} onClick={() => handleTagToggle(tag)} className={`px-3 py-1 text-sm rounded-full border transition-colors ${tags.includes(tag) ? 'bg-green-600 text-white border-green-600' : 'bg-white text-stone-700 border-stone-300 hover:bg-stone-50'}`}>
+                            {tag}
+                        </button>
+                    ))}
+                </div>
+            </div>
+            
+            <div className={`flex items-center gap-3 p-3 rounded-md ${isAIConfigured ? 'bg-green-50' : 'bg-stone-100'}`}>
+                <SparklesIcon className={`w-8 h-8 ${isAIConfigured ? 'text-green-600' : 'text-stone-400'}`}/>
+                <div>
+                    <label htmlFor="ai-analysis" className={`font-medium ${isAIConfigured ? 'text-green-800' : 'text-stone-500'}`}>Request AI Analysis</label>
+                    <p className={`text-xs ${isAIConfigured ? 'text-green-700' : 'text-stone-500'}`}>Yuki will analyze your photos for changes and provide suggestions. (Requires at least one photo)</p>
+                </div>
+                 <input id="ai-analysis" type="checkbox" checked={requestAnalysis} onChange={e => setRequestAnalysis(e.target.checked)} className="ml-auto h-5 w-5 rounded text-green-600 focus:ring-green-500" disabled={photos.length === 0 || !isAIConfigured} />
+            </div>
+
+            {error && <p className="text-red-500 text-sm">{error}</p>}
+            <div className="flex justify-end gap-2">
+                <button type="button" onClick={onClose} className="bg-stone-200 text-stone-700 px-4 py-2 rounded-md">Cancel</button>
+                <button type="submit" className="bg-green-700 text-white px-4 py-2 rounded-md">Add Log</button>
+            </div>
+        </form>
+    );
+}
+
+const GrowthVisualizer: React.FC<{tree: BonsaiTree, onClose: () => void}> = ({ tree, onClose }) => {
+    const logsWithPhotos = tree.logs.filter(l => l.photos.length > 0);
+    const [startLogId, setStartLogId] = useState<string>(logsWithPhotos.length > 1 ? logsWithPhotos[logsWithPhotos.length - 1].id : '');
+    const [endLogId, setEndLogId] = useState<string>(logsWithPhotos.length > 0 ? logsWithPhotos[0].id : '');
+    const [analysis, setAnalysis] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState('');
+
+    const handleGenerate = async () => {
+        setError('');
+        const startLog = logsWithPhotos.find(l => l.id === startLogId);
+        const endLog = logsWithPhotos.find(l => l.id === endLogId);
+
+        if (!startLog || !endLog || !startLog.photos[0] || !endLog.photos[0]) return;
+        
+        setIsLoading(true);
+        setAnalysis(null);
+
+        const photoData = [
+            { date: startLog.date, image: startLog.photos[0] },
+            { date: endLog.date, image: endLog.photos[0] }
+        ].sort((a,b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+
+        try {
+            const result = await analyzeGrowthProgression(tree.species, photoData);
+            setAnalysis(result || "Could not generate analysis.");
+        } catch (e: any) {
+            setError(e.message);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+    
+    const startPhoto = logsWithPhotos.find(l => l.id === startLogId)?.photos[0];
+    const endPhoto = logsWithPhotos.find(l => l.id === endLogId)?.photos[0];
+
+    return (
+        <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+                <div>
+                    <label className="block text-sm font-medium">Start Photo</label>
+                    <select value={startLogId} onChange={e => setStartLogId(e.target.value)} className="w-full p-2 border rounded-md">
+                        {logsWithPhotos.map(l => <option key={l.id} value={l.id}>{new Date(l.date).toLocaleDateString()} - {l.title}</option>)}
+                    </select>
+                    {startPhoto && <img src={`data:image/jpeg;base64,${startPhoto}`} className="mt-2 rounded-md w-full" />}
+                </div>
+                 <div>
+                    <label className="block text-sm font-medium">End Photo</label>
+                    <select value={endLogId} onChange={e => setEndLogId(e.target.value)} className="w-full p-2 border rounded-md">
+                        {logsWithPhotos.map(l => <option key={l.id} value={l.id}>{new Date(l.date).toLocaleDateString()} - {l.title}</option>)}
+                    </select>
+                    {endPhoto && <img src={`data:image/jpeg;base64,${endPhoto}`} className="mt-2 rounded-md w-full" />}
+                </div>
+            </div>
+            
+            <button onClick={handleGenerate} disabled={isLoading || !startLogId || !endLogId || startLogId === endLogId} className="w-full flex items-center justify-center gap-2 rounded-md bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 disabled:bg-stone-400">
+                <SparklesIcon className="w-5 h-5" />
+                {isLoading ? 'Yuki is Analyzing...' : 'Generate Growth Analysis'}
+            </button>
+            {error && <p className="text-sm text-red-600 text-center">{error}</p>}
+            {isLoading && <Spinner text="Analyzing progression..." />}
+            {analysis && (
+                 <div className="my-3 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-r-lg">
+                    <h4 className="font-bold text-blue-800">Progression Analysis</h4>
+                    <p className="text-sm text-blue-700 mt-2 whitespace-pre-wrap">{analysis}</p>
+                </div>
+            )}
+        </div>
+    );
+};
+
+const Modal: React.FC<{onClose: () => void, title: string, children: React.ReactNode}> = ({ onClose, title, children }) => {
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={onClose}>
+            <div className="bg-white rounded-2xl shadow-xl w-full max-w-4xl p-6 relative" onClick={e => e.stopPropagation()}>
+                <h3 className="text-xl font-bold text-stone-900 mb-4">{title}</h3>
+                {children}
+            </div>
+        </div>
+    );
+};
+
+
+export default BonsaiDiaryView;

views/CheckoutCancelView.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+// ====================================================================================
+// NOTE: This component is no longer used in the application.
+// The Stripe checkout flow has been removed.
+// This file is kept to avoid breaking imports but its content is non-functional.
+// ====================================================================================
+
+const CheckoutCancelView: React.FC = () => {
+    return (
+        <div className="flex items-center justify-center h-screen bg-stone-100">
+            <div className="text-center p-8">
+                <h1 className="text-2xl font-bold">View Deprecated</h1>
+                <p>This view is currently not in use.</p>
+            </div>
+        </div>
+    );
+};
+
+export default CheckoutCancelView;

views/CheckoutSuccessView.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+// ====================================================================================
+// NOTE: This component is no longer used in the application.
+// The Stripe checkout flow has been removed.
+// This file is kept to avoid breaking imports but its content is non-functional.
+// ====================================================================================
+
+const CheckoutSuccessView: React.FC = () => {
+    return (
+        <div className="flex items-center justify-center h-screen bg-stone-100">
+            <div className="text-center p-8">
+                <h1 className="text-2xl font-bold">View Deprecated</h1>
+                <p>This view is currently not in use.</p>
+            </div>
+        </div>
+    );
+};
+
+export default CheckoutSuccessView;

views/DesignStudioView.tsx

@@ -0,0 +1,277 @@
+
+
+
+
+
+import React, { useState, useRef, useLayoutEffect } from 'react';
+import { PaletteIcon, SparklesIcon, UploadCloudIcon, AlertTriangleIcon } from '../components/icons';
+import Spinner from '../components/Spinner';
+import { generateStylingBlueprint, isAIConfigured } from '../services/geminiService';
+import { AppStatus, AnnotationType } from '../types';
+import type { StylingBlueprint, StylingAnnotation, SvgPoint, View } from '../types';
+
+const ANNOTATION_STYLES: { [key in AnnotationType]: React.CSSProperties } = {
+    [AnnotationType.PruneLine]: { stroke: '#ef4444', strokeWidth: 3, strokeDasharray: '6 4', fill: 'none' },
+    [AnnotationType.RemoveBranch]: { stroke: '#ef4444', strokeWidth: 2, fill: 'rgba(239, 68, 68, 0.3)' },
+    [AnnotationType.WireDirection]: { stroke: '#3b82f6', strokeWidth: 3, fill: 'none', markerEnd: 'url(#arrow-head-blue)' },
+    [AnnotationType.FoliageRefinement]: { stroke: '#22c55e', strokeWidth: 3, strokeDasharray: '8 5', fill: 'rgba(34, 197, 94, 0.2)' },
+    [AnnotationType.JinShari]: { stroke: '#a16207', strokeWidth: 2, fill: 'rgba(161, 98, 7, 0.25)', strokeDasharray: '3 3' },
+    [AnnotationType.TrunkLine]: { stroke: '#f97316', strokeWidth: 4, fill: 'none', opacity: 0.8, markerEnd: 'url(#arrow-head-orange)' },
+    [AnnotationType.ExposeRoot]: { stroke: '#9333ea', strokeWidth: 2, fill: 'rgba(147, 51, 234, 0.2)', strokeDasharray: '5 5' },
+};
+
+const SvgAnnotation: React.FC<{ annotation: StylingAnnotation, scale: { x: number, y: number } }> = ({ annotation, scale }) => {
+    const style = ANNOTATION_STYLES[annotation.type];
+    const { type, points, path, label } = annotation;
+
+    const transformPoints = (pts: SvgPoint[]): string => {
+        return pts.map(p => `${p.x * scale.x},${p.y * scale.y}`).join(' ');
+    };
+
+    const scalePath = (pathData: string): string => {
+        return pathData.replace(/([0-9.]+)/g, (match, number, offset) => {
+            const precedingChar = pathData[offset - 1];
+            // Simple check: 'y' coordinate often follows 'x' or a space/comma.
+            // This isn't perfect but works for M, L, Q, C path commands.
+            const isY = precedingChar === ',' || (precedingChar === ' ' && pathData.substring(0, offset).split(' ').length % 2 === 0);
+            return isY ? (parseFloat(number) * scale.y).toFixed(2) : (parseFloat(number) * scale.x).toFixed(2);
+        });
+    };
+
+    const positionLabel = (): SvgPoint => {
+        if (points && points.length > 0) {
+            // Average the points to find a center for the label
+            const total = points.reduce((acc, p) => ({ x: acc.x + p.x, y: acc.y + p.y }), { x: 0, y: 0 });
+            return { x: (total.x / points.length) * scale.x, y: (total.y / points.length) * scale.y };
+        }
+        if (path) {
+            // Get the last point of the path for the label
+            const commands = path.split(' ');
+            const lastX = parseFloat(commands[commands.length - 2]);
+            const lastY = parseFloat(commands[commands.length - 1]);
+            return { x: lastX * scale.x, y: lastY * scale.y };
+        }
+        return { x: 0, y: 0 };
+    };
+    
+    const labelPos = positionLabel();
+
+    const renderShape = () => {
+        switch (type) {
+            case AnnotationType.PruneLine:
+                return <polyline points={transformPoints(points || [])} style={style} />;
+            case AnnotationType.FoliageRefinement:
+            case AnnotationType.RemoveBranch:
+            case AnnotationType.JinShari:
+            case AnnotationType.ExposeRoot:
+                return <polygon points={transformPoints(points || [])} style={style} />;
+            case AnnotationType.WireDirection:
+            case AnnotationType.TrunkLine:
+                return <path d={scalePath(path || '')} style={style} />;
+            default:
+                return null;
+        }
+    };
+    
+    return (
+        <g className="annotation-group transition-opacity hover:opacity-100 opacity-80">
+            {renderShape()}
+            <text x={labelPos.x + 5} y={labelPos.y - 5} fill="white" stroke="black" strokeWidth="0.5px" paintOrder="stroke" fontSize="14" fontWeight="bold" className="pointer-events-none">
+                {label}
+            </text>
+        </g>
+    );
+};
+
+
+const DesignStudioView: React.FC<{ setActiveView: (view: View) => void }> = ({ setActiveView }) => {
+    const [status, setStatus] = useState<AppStatus>(AppStatus.IDLE);
+    const [image, setImage] = useState<{ preview: string; base64: string } | null>(null);
+    const [prompt, setPrompt] = useState<string>('');
+    const [blueprint, setBlueprint] = useState<StylingBlueprint | null>(null);
+    const [error, setError] = useState<string>('');
+    const [viewBox, setViewBox] = useState({ width: 0, height: 0 });
+    const [scale, setScale] = useState({ x: 1, y: 1 });
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const imageContainerRef = useRef<HTMLDivElement>(null);
+    const aiConfigured = isAIConfigured();
+
+    useLayoutEffect(() => {
+        if (image && blueprint && imageContainerRef.current) {
+            const { clientWidth, clientHeight } = imageContainerRef.current;
+            setViewBox({ width: clientWidth, height: clientHeight });
+            setScale({
+                x: clientWidth / blueprint.canvas.width,
+                y: clientHeight / blueprint.canvas.height
+            });
+        }
+    }, [image, blueprint]);
+    
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            if (file.size > 4 * 1024 * 1024) {
+                setError("File size exceeds 4MB. Please upload a smaller image.");
+                return;
+            }
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const base64String = (reader.result as string).split(',')[1];
+                setImage({ preview: reader.result as string, base64: base64String });
+                setError('');
+                setBlueprint(null);
+                setStatus(AppStatus.IDLE);
+            };
+            reader.onerror = () => setError("Failed to read the file.");
+            reader.readAsDataURL(file);
+        }
+    };
+    
+    const handleGenerate = async () => {
+        if (!image) {
+            setError("Please upload an image first.");
+            return;
+        }
+        if (!prompt.trim()) {
+            setError("Please enter a styling instruction.");
+            return;
+        }
+
+        setStatus(AppStatus.ANALYZING);
+        setError('');
+        setBlueprint(null);
+
+        try {
+            const result = await generateStylingBlueprint(image.base64, prompt);
+            if (result) {
+                setBlueprint(result);
+                setStatus(AppStatus.SUCCESS);
+            } else {
+                throw new Error('Failed to generate styling blueprint. The AI may be busy or the prompt was not specific enough. Please try again.');
+            }
+        } catch (e: any) {
+            setError(e.message);
+            setStatus(AppStatus.ERROR);
+        }
+    };
+
+    const presetPrompts = [
+        "Style as a classic formal upright (Chokkan) with clear, triangular lines.",
+        "Restyle into a dramatic cascade (Kengai) form, as if hanging off a cliff.",
+        "Imagine this as a windswept (Fukinagashi) tree, with all branches flowing in one direction.",
+        "Show a semi-cascade (Han-kengai) version.",
+        "Give it a more mature appearance with a denser, more refined canopy of foliage pads.",
+        "Incorporate some dramatic deadwood (Jin and Shari) on the trunk and branches.",
+    ];
+
+    return (
+        <div className="space-y-8 max-w-7xl mx-auto">
+            <header className="text-center">
+                <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+                    <PaletteIcon className="w-8 h-8 text-purple-600" />
+                    AI Design Studio
+                </h2>
+                <p className="mt-4 text-lg leading-8 text-stone-600 max-w-3xl mx-auto">
+                    Describe your desired outcome, and Yuki will generate a visual guide on your photo. Using SVG graphics and text labels, she shows you exactly where to prune, wire, or shape your tree to achieve your vision.
+                </p>
+            </header>
+            
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
+                {/* Left Column: Controls */}
+                <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200 space-y-4 lg:col-span-1">
+                     <div>
+                        <label className="block text-sm font-medium text-stone-900">1. Upload Photo</label>
+                        <div onClick={() => fileInputRef.current?.click()} className="mt-1 flex justify-center p-4 rounded-lg border-2 border-dashed border-stone-300 hover:border-purple-600 transition-colors cursor-pointer">
+                           <div className="text-center">
+                               {image ? <p className="text-green-700 font-semibold">Image Loaded!</p> : <UploadCloudIcon className="mx-auto h-10 w-10 text-stone-400" />}
+                                <p className="mt-1 text-sm text-stone-600">{image ? 'Click to change image' : 'Click to upload'}</p>
+                           </div>
+                           <input ref={fileInputRef} type="file" className="sr-only" onChange={handleFileChange} accept="image/png, image/jpeg" />
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <label htmlFor="style-prompt" className="block text-sm font-medium text-stone-900">2. Describe Your Goal</label>
+                        <textarea
+                            id="style-prompt"
+                            rows={3}
+                            value={prompt}
+                            onChange={e => setPrompt(e.target.value)}
+                            className="mt-1 block w-full rounded-md border-stone-300 shadow-sm focus:border-purple-500 focus:ring-purple-500"
+                            placeholder="e.g., 'Make it look like a windswept tree'"
+                        />
+                    </div>
+                    <div className="space-y-2">
+                         <p className="text-sm font-medium text-stone-700">Or try a preset goal:</p>
+                         <div className="flex flex-wrap gap-2">
+                           {presetPrompts.map((p, i) => (
+                               <button key={i} onClick={() => setPrompt(p)} className="text-xs bg-stone-100 text-stone-700 px-3 py-1 rounded-full hover:bg-purple-100 hover:text-purple-800 transition-colors">
+                                 {p.split('(')[0].trim()}
+                               </button>
+                           ))}
+                        </div>
+                    </div>
+                     <button onClick={handleGenerate} disabled={status === AppStatus.ANALYZING || !image || !aiConfigured} className="w-full flex items-center justify-center gap-2 rounded-md bg-purple-600 px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 disabled:bg-stone-400 disabled:cursor-not-allowed">
+                       <SparklesIcon className="w-5 h-5"/> {status === AppStatus.ANALYZING ? 'Generating Blueprint...' : '3. Generate Blueprint'}
+                    </button>
+                    {error && <p className="text-sm text-red-600 mt-2 bg-red-50 p-3 rounded-md">{error}</p>}
+                    {!aiConfigured && (
+                        <div className="mt-4 p-3 bg-yellow-50 text-yellow-800 rounded-lg border border-yellow-200 text-center">
+                            <p className="text-sm">
+                            Please set your Gemini API key in the{' '}
+                            <button onClick={() => setActiveView('settings')} className="font-bold underline hover:text-yellow-900">
+                                Settings page
+                            </button>
+                            {' '}to enable this feature.
+                            </p>
+                        </div>
+                    )}
+                </div>
+
+                {/* Right Column: Canvas */}
+                <div className="bg-white p-4 rounded-xl shadow-lg border border-stone-200 lg:col-span-2">
+                    <div ref={imageContainerRef} className="relative w-full aspect-w-4 aspect-h-3 bg-stone-100 rounded-lg">
+                        {image ? (
+                            <>
+                                <img src={image.preview} alt="Bonsai" className="w-full h-full object-contain rounded-lg" />
+                                {blueprint && (
+                                    <svg
+                                        className="absolute top-0 left-0 w-full h-full"
+                                        viewBox={`0 0 ${viewBox.width} ${viewBox.height}`}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                        <defs>
+                                            <marker id="arrow-head-blue" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+                                                <path d="M 0 0 L 10 5 L 0 10 z" fill="#3b82f6" />
+                                            </marker>
+                                            <marker id="arrow-head-orange" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+                                                <path d="M 0 0 L 10 5 L 0 10 z" fill="#f97316" />
+                                            </marker>
+                                        </defs>
+                                        {blueprint.annotations.map((anno, i) => (
+                                            <SvgAnnotation key={i} annotation={anno} scale={scale} />
+                                        ))}
+                                    </svg>
+                                )}
+                            </>
+                        ) : (
+                            <div className="flex items-center justify-center h-full">
+                                <p className="text-stone-500">Your image and blueprint will appear here</p>
+                            </div>
+                        )}
+                        {status === AppStatus.ANALYZING && <div className="absolute inset-0 flex items-center justify-center bg-white/75"><Spinner text="Yuki is sketching your vision..." /></div>}
+                    </div>
+                     {blueprint && status === AppStatus.SUCCESS && (
+                         <div className="mt-4 p-4 bg-purple-50 border-l-4 border-purple-500 rounded-r-lg">
+                            <h4 className="font-bold text-purple-800">Yuki's Summary</h4>
+                            <p className="text-sm text-purple-700 mt-1">{blueprint.summary}</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DesignStudioView;

views/FertilizerMixerView.tsx

@@ -0,0 +1,131 @@
+
+import React, { useState, useMemo } from 'react';
+import { BeakerIcon } from '../components/icons';
+
+type WaterUnit = 'L' | 'gal';
+type ConcentrateUnit = 'ml' | 'tsp' | 'tbsp';
+type Strength = 'full' | 'half' | 'quarter';
+
+const STRENGTH_MULTIPLIERS: Record<Strength, number> = {
+    full: 1,
+    half: 0.5,
+    quarter: 0.25,
+};
+
+const CONVERSION_TO_ML = {
+    ml: 1,
+    tsp: 4.92892,
+    tbsp: 14.7868,
+};
+
+const CONVERSION_TO_LITER = {
+    L: 1,
+    gal: 3.78541,
+};
+
+const FertilizerMixerView: React.FC = () => {
+    const [waterAmount, setWaterAmount] = useState(1);
+    const [waterUnit, setWaterUnit] = useState<WaterUnit>('gal');
+    const [concentrateAmount, setConcentrateAmount] = useState(1);
+    const [concentrateUnit, setConcentrateUnit] = useState<ConcentrateUnit>('tsp');
+    const [strength, setStrength] = useState<Strength>('half');
+    const [baseWaterAmount, setBaseWaterAmount] = useState(1);
+    const [baseWaterUnit, setBaseWaterUnit] = useState<WaterUnit>('gal');
+
+    const result = useMemo(() => {
+        try {
+            const desiredWaterL = waterAmount * CONVERSION_TO_LITER[waterUnit];
+            const baseWaterL = baseWaterAmount * CONVERSION_TO_LITER[baseWaterUnit];
+            const baseConcentrateMl = concentrateAmount * CONVERSION_TO_ML[concentrateUnit];
+            
+            if (baseWaterL === 0) return { amount: 0, unit: 'ml' };
+
+            const ratio = baseConcentrateMl / baseWaterL; // ml of concentrate per L of water
+            const strengthMultiplier = STRENGTH_MULTIPLIERS[strength];
+            
+            const neededMl = desiredWaterL * ratio * strengthMultiplier;
+
+            // Return result in a user-friendly unit
+            if (neededMl < 15 && concentrateUnit !== 'ml') return { amount: neededMl / CONVERSION_TO_ML.tsp, unit: 'tsp' };
+            if (neededMl < 45 && concentrateUnit !== 'ml') return { amount: neededMl / CONVERSION_TO_ML.tbsp, unit: 'tbsp' };
+            return { amount: neededMl, unit: 'ml' };
+
+        } catch (e) {
+            return { amount: 0, unit: 'ml' };
+        }
+    }, [waterAmount, waterUnit, concentrateAmount, concentrateUnit, strength, baseWaterAmount, baseWaterUnit]);
+
+    const renderUnitSelector = (value: string, setter: (val: any) => void, units: string[]) => (
+        <div className="flex gap-1 bg-stone-100 p-1 rounded-lg">
+            {units.map(unit => (
+                <button key={unit} onClick={() => setter(unit)} className={`px-3 py-1 text-sm font-medium rounded-md ${value === unit ? 'bg-white shadow' : ''}`}>
+                    {unit}
+                </button>
+            ))}
+        </div>
+    );
+
+    return (
+        <div className="space-y-8 max-w-2xl mx-auto">
+            <header className="text-center">
+                <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+                    <BeakerIcon className="w-8 h-8 text-cyan-600" />
+                    Fertilizer Mixer
+                </h2>
+                <p className="mt-4 text-lg leading-8 text-stone-600">
+                    Calculate the perfect fertilizer dilution every time. No more over or under-feeding.
+                </p>
+            </header>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
+                <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200 space-y-6">
+                    <div>
+                        <h3 className="font-semibold text-stone-800 mb-2">1. Dosage from Bottle</h3>
+                        <p className="text-xs text-stone-500 mb-2">Enter the recommended full-strength dose from the fertilizer label.</p>
+                         <div className="flex items-center gap-2">
+                             <input type="number" value={concentrateAmount} onChange={e => setConcentrateAmount(Number(e.target.value))} className="w-full p-2 border rounded-md" />
+                             {renderUnitSelector(concentrateUnit, setConcentrateUnit, ['ml', 'tsp', 'tbsp'])}
+                         </div>
+                         <p className="text-center my-1 text-stone-600 font-medium">per</p>
+                         <div className="flex items-center gap-2">
+                             <input type="number" value={baseWaterAmount} onChange={e => setBaseWaterAmount(Number(e.target.value))} className="w-full p-2 border rounded-md" />
+                             {renderUnitSelector(baseWaterUnit, setBaseWaterUnit, ['L', 'gal'])}
+                         </div>
+                    </div>
+                     <div>
+                        <h3 className="font-semibold text-stone-800 mb-2">2. Your Watering Can</h3>
+                        <p className="text-xs text-stone-500 mb-2">How much water are you preparing?</p>
+                        <div className="flex items-center gap-2">
+                            <input type="number" value={waterAmount} onChange={e => setWaterAmount(Number(e.target.value))} className="w-full p-2 border rounded-md" />
+                            {renderUnitSelector(waterUnit, setWaterUnit, ['L', 'gal'])}
+                        </div>
+                    </div>
+                    <div>
+                        <h3 className="font-semibold text-stone-800 mb-2">3. Desired Strength</h3>
+                        <div className="flex gap-1 bg-stone-100 p-1 rounded-lg">
+                            <button onClick={() => setStrength('full')} className={`flex-1 py-2 text-sm font-medium rounded-md ${strength === 'full' ? 'bg-white shadow' : ''}`}>Full (100%)</button>
+                            <button onClick={() => setStrength('half')} className={`flex-1 py-2 text-sm font-medium rounded-md ${strength === 'half' ? 'bg-white shadow' : ''}`}>Half (50%)</button>
+                            <button onClick={() => setStrength('quarter')} className={`flex-1 py-2 text-sm font-medium rounded-md ${strength === 'quarter' ? 'bg-white shadow' : ''}`}>Quarter (25%)</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="bg-white p-6 rounded-xl shadow-lg border-2 border-cyan-600 space-y-4 text-center">
+                    <h3 className="text-xl font-bold text-stone-900">Your Custom Mix</h3>
+                    <p className="text-stone-600">Add this much concentrate to your watering can:</p>
+                    <div>
+                        <p className="text-5xl font-bold text-cyan-700">{result.amount.toFixed(2)}</p>
+                        <p className="text-lg text-stone-600">{result.unit}</p>
+                    </div>
+                    <div className="mt-4 pt-4 border-t-2 border-dashed">
+                        <p className="text-sm text-stone-700">
+                            This creates a {strength}-strength solution of {waterAmount} {waterUnit} of fertilizer.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default FertilizerMixerView;

views/HealthCheckView.tsx

@@ -0,0 +1,278 @@
+
+
+
+
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { useLocalStorage } from '../hooks/useLocalStorage';
+import { runHealthCheck, isAIConfigured } from '../services/geminiService';
+import type { View, HealthCheckResult, BonsaiTree, DiaryLog } from '../types';
+import { AppStatus, LogTag } from '../types';
+import { StethoscopeIcon, LeafIcon, DropletIcon, BugIcon, BonsaiIcon, SparklesIcon, AlertTriangleIcon, UploadCloudIcon, CheckCircleIcon, ArrowLeftIcon } from '../components/icons';
+import Spinner from '../components/Spinner';
+
+type Stage = 'selecting_problem' | 'uploading_photo' | 'analyzing' | 'results';
+
+const problemCategories = [
+    { name: 'Leaf Discoloration', description: 'Yellowing, browning, or strange colors on leaves.', icon: LeafIcon, instruction: "Take a clear, well-lit photo of the discolored leaves. Show both the top and underside if possible." },
+    { name: 'Spots or Residue', description: 'Powdery mildew, black spots, or sticky residue.', icon: DropletIcon, instruction: "Get a close-up of the spots or residue. Try to have a healthy leaf in the background for comparison." },
+    { name: 'Pests or Damage', description: 'Visible insects, webbing, or chewed leaves.', icon: BugIcon, instruction: "Photograph the pests or the damage they've caused. If the pest is tiny, get as close as you can while maintaining focus." },
+    { name: 'Wilting or Drooping', description: 'Leaves or branches are losing turgidity and hanging down.', icon: BonsaiIcon, instruction: "Show the entire wilting branch or section of the tree. Also, include a photo of the soil surface if possible." },
+    { name: 'General Weakness', description: 'Overall lack of vigor, poor growth, or branch dieback.', icon: AlertTriangleIcon, instruction: "Take a photo of the entire tree so its overall structure and condition are visible." },
+];
+
+const HealthCheckView: React.FC<{ setActiveView: (view: View) => void }> = ({ setActiveView }) => {
+    const [stage, setStage] = useState<Stage>('selecting_problem');
+    const [selectedCategory, setSelectedCategory] = useState<(typeof problemCategories)[0] | null>(null);
+    const [trees, setTrees] = useLocalStorage<BonsaiTree[]>('bonsai-diary-trees', []);
+    const [selectedTreeId, setSelectedTreeId] = useState<string>('');
+    const [treeInfo, setTreeInfo] = useState({ species: '', location: '' });
+    const [image, setImage] = useState<{ preview: string; base64: string } | null>(null);
+    const [result, setResult] = useState<HealthCheckResult | null>(null);
+    const [error, setError] = useState<string>('');
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const aiConfigured = isAIConfigured();
+
+    useEffect(() => {
+        if (selectedTreeId) {
+            const tree = trees.find(t => t.id === selectedTreeId);
+            if (tree) {
+                setTreeInfo({ species: tree.species, location: tree.location });
+            }
+        } else {
+            setTreeInfo({ species: '', location: '' });
+        }
+    }, [selectedTreeId, trees]);
+
+
+    const handleSelectCategory = (category: (typeof problemCategories)[0]) => {
+        setSelectedCategory(category);
+        setStage('uploading_photo');
+    };
+    
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            if (file.size > 4 * 1024 * 1024) { // 4MB limit
+                setError("File size exceeds 4MB. Please upload a smaller image.");
+                return;
+            }
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const base64String = (reader.result as string).split(',')[1];
+                setImage({ preview: reader.result as string, base64: base64String });
+                setError('');
+            };
+            reader.onerror = () => setError("Failed to read the file.");
+            reader.readAsDataURL(file);
+        }
+    };
+    
+    const handleRunAnalysis = async () => {
+        if (!image || !treeInfo.species || !treeInfo.location || !selectedCategory) {
+            setError("Please provide all required information: an image, species, and location.");
+            return;
+        }
+        setStage('analyzing');
+        setError('');
+
+        try {
+            const analysisResult = await runHealthCheck(image.base64, treeInfo.species, treeInfo.location, selectedCategory.name);
+            if(analysisResult) {
+                setResult(analysisResult);
+                setStage('results');
+            } else {
+                 throw new Error("Failed to get a diagnosis from the AI. It might be busy, or the image could not be processed. Please try again.");
+            }
+        } catch (e: any) {
+            setError(e.message);
+            setStage('uploading_photo');
+        }
+    };
+    
+    const handleSaveToLog = () => {
+        if (!selectedTreeId || !result) {
+            alert("No tree selected or no result to save.");
+            return;
+        };
+
+        const newLog: DiaryLog = {
+            id: `log-${Date.now()}`,
+            date: new Date().toISOString(),
+            title: `Health Check: ${result.probableCause}`,
+            notes: `Ran a diagnostic for "${selectedCategory?.name}". The AI diagnosed the issue with ${result.confidence} confidence.`,
+            photos: image ? [image.base64] : [],
+            tags: [LogTag.HealthDiagnosis],
+            healthCheckResult: result
+        };
+
+        const treeToUpdate = trees.find(t => t.id === selectedTreeId);
+        if (treeToUpdate) {
+            const updatedLogs = [newLog, ...treeToUpdate.logs].sort((a,b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+            const updatedTree = { ...treeToUpdate, logs: updatedLogs };
+            const newTreeList = trees.map(t => t.id === selectedTreeId ? updatedTree : t);
+            
+            const storageKey = `yuki-app-bonsai-diary-trees`;
+            window.localStorage.setItem(storageKey, JSON.stringify(newTreeList));
+
+            alert("Diagnosis saved to your tree's log!");
+            setActiveView('garden');
+        }
+    };
+    
+    const reset = () => {
+        setStage('selecting_problem');
+        setSelectedCategory(null);
+        setImage(null);
+        setResult(null);
+        setError('');
+        // Keep tree selection
+    };
+
+    const renderHeader = () => (
+         <header className="text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+                <StethoscopeIcon className="w-8 h-8 text-red-600" />
+                Bonsai Health Check-up
+            </h2>
+            <p className="mt-4 text-lg leading-8 text-stone-600 max-w-2xl mx-auto">
+                Get a quick, focused diagnosis for a specific problem with your bonsai.
+            </p>
+        </header>
+    );
+
+    const renderContent = () => {
+        switch(stage) {
+            case 'selecting_problem':
+                return (
+                    <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200">
+                        <h3 className="text-xl font-semibold text-center text-stone-800 mb-2">What seems to be the problem?</h3>
+                        <p className="text-center text-stone-600 mb-6">Select a category to begin the diagnosis.</p>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                            {problemCategories.map(cat => {
+                                const Icon = cat.icon;
+                                return (
+                                <div key={cat.name} onClick={() => handleSelectCategory(cat)} className="bg-stone-50 rounded-lg p-6 border-2 border-transparent hover:border-green-600 hover:bg-white cursor-pointer transition-all duration-200 text-center flex flex-col items-center shadow-sm hover:shadow-xl">
+                                    <Icon className="w-12 h-12 text-green-700 mb-3" />
+                                    <h4 className="font-bold text-stone-900">{cat.name}</h4>
+                                    <p className="text-sm text-stone-600 mt-1">{cat.description}</p>
+                                </div>
+                            )})}
+                        </div>
+                    </div>
+                );
+            
+            case 'uploading_photo':
+                return (
+                    <div className="bg-white p-8 rounded-2xl shadow-lg border border-stone-200 max-w-2xl mx-auto space-y-6">
+                        <button onClick={() => setStage('selecting_problem')} className="flex items-center gap-2 text-sm font-semibold text-green-700 hover:text-green-600">
+                            <ArrowLeftIcon className="w-5 h-5"/> Back to Categories
+                        </button>
+                        <div>
+                            <h3 className="text-2xl font-bold text-stone-800">{selectedCategory?.name}</h3>
+                            <p className="text-stone-600 mt-2"><strong className="text-stone-800">Photo Instructions:</strong> {selectedCategory?.instruction}</p>
+                        </div>
+                        <div onClick={() => fileInputRef.current?.click()} className="mt-2 flex justify-center rounded-lg border-2 border-dashed border-stone-300 px-6 py-10 hover:border-green-600 transition-colors cursor-pointer">
+                            <div className="text-center">
+                                {image ? <img src={image.preview} alt="Bonsai preview" className="mx-auto h-40 w-auto rounded-md object-cover" /> : (
+                                <>
+                                    <UploadCloudIcon className="mx-auto h-12 w-12 text-stone-400" />
+                                    <p className="mt-2 text-sm font-semibold text-green-700">Upload a file or drag and drop</p>
+                                    <p className="text-xs text-stone-500">PNG, JPG up to 4MB</p>
+                                </> )}
+                            </div>
+                             <input ref={fileInputRef} type="file" className="sr-only" onChange={handleFileChange} accept="image/png, image/jpeg" />
+                        </div>
+                        <div className="space-y-4">
+                             <select value={selectedTreeId} onChange={(e) => setSelectedTreeId(e.target.value)} className="w-full p-2 border rounded-md" required>
+                                <option value="">Select a tree from your garden...</option>
+                                {trees.map(tree => <option key={tree.id} value={tree.id}>{tree.name} ({tree.species})</option>)}
+                                <option value="new">-- This is a new tree --</option>
+                            </select>
+                            {selectedTreeId === 'new' && (
+                                <div className="grid grid-cols-2 gap-4">
+                                    <input type="text" placeholder="Species" value={treeInfo.species} onChange={(e) => setTreeInfo(t => ({...t, species: e.target.value}))} className="w-full p-2 border rounded-md"/>
+                                    <input type="text" placeholder="Location" value={treeInfo.location} onChange={(e) => setTreeInfo(t => ({...t, location: e.target.value}))} className="w-full p-2 border rounded-md"/>
+                                </div>
+                            )}
+                        </div>
+                        {error && <p className="text-sm text-red-600">{error}</p>}
+                        <button onClick={handleRunAnalysis} disabled={!image || !aiConfigured} className="w-full flex items-center justify-center gap-2 rounded-md bg-red-600 px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-red-500 disabled:bg-stone-400 disabled:cursor-not-allowed">
+                           <StethoscopeIcon className="w-5 h-5"/> Get Diagnosis
+                        </button>
+                        {!aiConfigured && (
+                            <div className="mt-4 p-3 bg-yellow-50 text-yellow-800 rounded-lg border border-yellow-200 text-center">
+                                <p className="text-sm">
+                                AI features are disabled. Please set your Gemini API key in the{' '}
+                                <button onClick={() => setActiveView('settings')} className="font-bold underline hover:text-yellow-900">
+                                    Settings page
+                                </button>.
+                                </p>
+                            </div>
+                        )}
+                    </div>
+                );
+
+            case 'analyzing':
+                return <Spinner text={`Yuki is diagnosing the ${selectedCategory?.name.toLowerCase()}...`} />;
+
+            case 'results':
+                if (!result) return null;
+                const confidenceColor = result.confidence === 'High' ? 'bg-red-100 text-red-800' : result.confidence === 'Medium' ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800';
+                return (
+                    <div className="bg-white p-8 rounded-2xl shadow-lg border border-stone-200 max-w-3xl mx-auto space-y-6">
+                        <h3 className="text-2xl font-bold text-stone-800">Diagnosis Complete</h3>
+                        <div className="p-4 bg-stone-50 rounded-lg border">
+                           <div className="flex justify-between items-baseline">
+                               <h4 className="text-xl font-bold text-stone-900">{result.probableCause}</h4>
+                               <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${confidenceColor}`}>{result.confidence} Confidence</span>
+                           </div>
+                           <p className="mt-2 text-stone-600">{result.explanation}</p>
+                        </div>
+                        
+                        <div>
+                            <h4 className="text-lg font-semibold text-stone-800 mb-2">Treatment Plan</h4>
+                            <ol className="space-y-4">
+                                {result.treatmentPlan.map(step => (
+                                <li key={step.step} className="flex gap-4">
+                                    <div className="flex-shrink-0 w-8 h-8 bg-green-600 text-white rounded-full flex items-center justify-center font-bold">{step.step}</div>
+                                    <div>
+                                        <p className="font-bold text-stone-800">{step.action}</p>
+                                        <p className="text-stone-600">{step.details}</p>
+                                    </div>
+                                </li>))}
+                            </ol>
+                        </div>
+                        
+                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div className="p-4 bg-green-50 rounded-lg">
+                                <h4 className="font-semibold text-green-800">Organic Alternatives</h4>
+                                <p className="text-sm text-green-700 mt-1">{result.organicAlternatives}</p>
+                            </div>
+                            <div className="p-4 bg-blue-50 rounded-lg">
+                                <h4 className="font-semibold text-blue-800">Future Prevention</h4>
+                                <p className="text-sm text-blue-700 mt-1">{result.preventativeMeasures}</p>
+                            </div>
+                        </div>
+
+                        <div className="flex flex-col sm:flex-row gap-4 pt-6 border-t">
+                            <button onClick={reset} className="flex-1 w-full bg-stone-200 text-stone-700 font-semibold py-3 px-6 rounded-lg hover:bg-stone-300 transition-colors">Run New Diagnosis</button>
+                            {selectedTreeId && selectedTreeId !== 'new' && (
+                                <button onClick={handleSaveToLog} className="flex-1 w-full flex items-center justify-center gap-2 rounded-md bg-green-700 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-green-600">
+                                    <CheckCircleIcon className="w-5 h-5"/> Save to Garden Log
+                                </button>
+                            )}
+                        </div>
+                    </div>
+                );
+        }
+    }
+
+    return (
+         <div className="space-y-8">
+            {renderHeader()}
+            <div>{renderContent()}</div>
+        </div>
+    );
+};
+
+export default HealthCheckView;

views/LoginView.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useContext } from 'react';
+import { SparklesIcon } from '../components/icons';
+import { AuthContext } from '../context/AuthContext';
+import { KOFI_PAGE_URL } from '../config';
+
+const LoginView: React.FC = () => {
+    const { login } = useContext(AuthContext);
+    const [name, setName] = useState('');
+    const [secret, setSecret] = useState('');
+    const [error, setError] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleLogin = (e: React.FormEvent) => {
+        e.preventDefault();
+        setError('');
+        setIsLoading(true);
+
+        setTimeout(() => {
+            const success = login(name, secret);
+            if (!success) {
+                setError('Invalid credentials. Please check your login name and secret password.');
+            }
+            // On success, the App component will automatically switch views.
+            setIsLoading(false);
+        }, 500); // Artificial delay for better UX
+    };
+
+    return (
+        <div className="flex items-center justify-center h-screen bg-stone-100">
+            <div className="w-full max-w-md p-8 space-y-6 bg-white rounded-2xl shadow-xl text-center border border-stone-200">
+                <div className="flex flex-col items-center">
+                    <SparklesIcon className="h-16 w-16 text-green-700" />
+                    <h1 className="mt-4 text-3xl font-bold text-stone-800">Welcome to Yuki</h1>
+                    <p className="mt-2 text-stone-600">Enter the credentials you received after your purchase.</p>
+                </div>
+                
+                <form onSubmit={handleLogin} className="space-y-4">
+                    <div>
+                        <input
+                            type="text"
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                            className="block w-full rounded-md border-0 py-2.5 px-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-green-600 sm:text-sm sm:leading-6"
+                            placeholder="Login Name"
+                            required
+                        />
+                    </div>
+                     <div>
+                        <input
+                            type="password"
+                            value={secret}
+                            onChange={(e) => setSecret(e.target.value)}
+                            className="block w-full rounded-md border-0 py-2.5 px-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-green-600 sm:text-sm sm:leading-6"
+                            placeholder="Secret Password"
+                            required
+                        />
+                    </div>
+
+                    {error && <p className="text-sm text-red-600">{error}</p>}
+                    
+                    <button 
+                        type="submit"
+                        disabled={isLoading}
+                        className="w-full bg-green-700 text-white font-bold py-3 px-6 rounded-lg hover:bg-green-600 transition-colors shadow-lg hover:shadow-xl disabled:bg-stone-400"
+                    >
+                        {isLoading ? 'Unlocking...' : 'Unlock'}
+                    </button>
+                </form>
+
+                 <p className="text-xs text-stone-500">
+                    Don't have access?{' '}
+                    <a 
+                        href={KOFI_PAGE_URL} 
+                        target="_blank" 
+                        rel="noopener noreferrer" 
+                        className="font-semibold hover:underline text-green-700"
+                    >
+                        Purchase on Ko-fi
+                    </a>.
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default LoginView;

views/NebariDeveloperView.tsx

@@ -0,0 +1,240 @@
+
+
+import React, { useState, useRef, useLayoutEffect } from 'react';
+import { RootsIcon, SparklesIcon, UploadCloudIcon, AlertTriangleIcon } from '../components/icons';
+import Spinner from '../components/Spinner';
+import { generateNebariBlueprint, isAIConfigured } from '../services/geminiService';
+import { AppStatus, AnnotationType } from '../types';
+import type { StylingBlueprint, StylingAnnotation, SvgPoint, View } from '../types';
+
+const ANNOTATION_STYLES: { [key in AnnotationType]: React.CSSProperties } = {
+    [AnnotationType.PruneLine]: { stroke: '#ef4444', strokeWidth: 3, strokeDasharray: '6 4', fill: 'none' },
+    [AnnotationType.RemoveBranch]: { stroke: '#ef4444', strokeWidth: 2, fill: 'rgba(239, 68, 68, 0.3)' },
+    [AnnotationType.WireDirection]: { stroke: '#3b82f6', strokeWidth: 3, fill: 'none', markerEnd: 'url(#arrow-head-blue)' },
+    [AnnotationType.FoliageRefinement]: { stroke: '#22c55e', strokeWidth: 3, strokeDasharray: '8 5', fill: 'rgba(34, 197, 94, 0.2)' },
+    [AnnotationType.JinShari]: { stroke: '#a16207', strokeWidth: 2, fill: 'rgba(161, 98, 7, 0.25)', strokeDasharray: '3 3' },
+    [AnnotationType.TrunkLine]: { stroke: '#f97316', strokeWidth: 4, fill: 'none', opacity: 0.8, markerEnd: 'url(#arrow-head-orange)' },
+    [AnnotationType.ExposeRoot]: { stroke: '#9333ea', strokeWidth: 2, fill: 'rgba(147, 51, 234, 0.2)', strokeDasharray: '5 5' },
+};
+
+const SvgAnnotation: React.FC<{ annotation: StylingAnnotation, scale: { x: number, y: number } }> = ({ annotation, scale }) => {
+    const style = ANNOTATION_STYLES[annotation.type];
+    const { type, points, path, label } = annotation;
+
+    const transformPoints = (pts: SvgPoint[]): string => {
+        return pts.map(p => `${p.x * scale.x},${p.y * scale.y}`).join(' ');
+    };
+
+    const scalePath = (pathData: string): string => {
+        return pathData.replace(/([0-9.]+)/g, (match, number, offset) => {
+            const precedingChar = pathData[offset - 1];
+            const isY = precedingChar === ',' || (precedingChar === ' ' && pathData.substring(0, offset).split(' ').length % 2 === 0);
+            return isY ? (parseFloat(number) * scale.y).toFixed(2) : (parseFloat(number) * scale.x).toFixed(2);
+        });
+    };
+
+    const positionLabel = (): SvgPoint => {
+        if (points && points.length > 0) {
+            const total = points.reduce((acc, p) => ({ x: acc.x + p.x, y: acc.y + p.y }), { x: 0, y: 0 });
+            return { x: (total.x / points.length) * scale.x, y: (total.y / points.length) * scale.y };
+        }
+        if (path) {
+            const commands = path.split(' ');
+            const lastX = parseFloat(commands[commands.length - 2]);
+            const lastY = parseFloat(commands[commands.length - 1]);
+            return { x: lastX * scale.x, y: lastY * scale.y };
+        }
+        return { x: 0, y: 0 };
+    };
+    
+    const labelPos = positionLabel();
+
+    const renderShape = () => {
+        switch (type) {
+            case AnnotationType.PruneLine:
+                return <polyline points={transformPoints(points || [])} style={style} />;
+            case AnnotationType.FoliageRefinement:
+            case AnnotationType.RemoveBranch:
+            case AnnotationType.JinShari:
+            case AnnotationType.ExposeRoot:
+                return <polygon points={transformPoints(points || [])} style={style} />;
+            case AnnotationType.WireDirection:
+            case AnnotationType.TrunkLine:
+                return <path d={scalePath(path || '')} style={style} />;
+            default:
+                return null;
+        }
+    };
+    
+    return (
+        <g className="annotation-group transition-opacity hover:opacity-100 opacity-80">
+            {renderShape()}
+            <text x={labelPos.x + 5} y={labelPos.y - 5} fill="white" stroke="black" strokeWidth="0.5px" paintOrder="stroke" fontSize="14" fontWeight="bold" className="pointer-events-none">
+                {label}
+            </text>
+        </g>
+    );
+};
+
+
+const NebariDeveloperView: React.FC<{ setActiveView: (view: View) => void }> = ({ setActiveView }) => {
+    const [status, setStatus] = useState<AppStatus>(AppStatus.IDLE);
+    const [image, setImage] = useState<{ preview: string; base64: string } | null>(null);
+    const [blueprint, setBlueprint] = useState<StylingBlueprint | null>(null);
+    const [error, setError] = useState<string>('');
+    const [viewBox, setViewBox] = useState({ width: 0, height: 0 });
+    const [scale, setScale] = useState({ x: 1, y: 1 });
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const imageContainerRef = useRef<HTMLDivElement>(null);
+    const aiConfigured = isAIConfigured();
+
+    useLayoutEffect(() => {
+        const handleResize = () => {
+            if (image && blueprint && imageContainerRef.current) {
+                const { clientWidth, clientHeight } = imageContainerRef.current;
+                setViewBox({ width: clientWidth, height: clientHeight });
+                setScale({
+                    x: clientWidth / blueprint.canvas.width,
+                    y: clientHeight / blueprint.canvas.height
+                });
+            }
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [image, blueprint]);
+    
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            if (file.size > 4 * 1024 * 1024) {
+                setError("File size exceeds 4MB. Please upload a smaller image.");
+                return;
+            }
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const base64String = (reader.result as string).split(',')[1];
+                setImage({ preview: reader.result as string, base64: base64String });
+                setError('');
+                setBlueprint(null);
+                setStatus(AppStatus.IDLE);
+            };
+            reader.onerror = () => setError("Failed to read the file.");
+            reader.readAsDataURL(file);
+        }
+    };
+    
+    const handleGenerate = async () => {
+        if (!image) {
+            setError("Please upload an image first.");
+            return;
+        }
+
+        setStatus(AppStatus.ANALYZING);
+        setError('');
+        setBlueprint(null);
+        
+        try {
+            const result = await generateNebariBlueprint(image.base64);
+            if (result) {
+                setBlueprint(result);
+                setStatus(AppStatus.SUCCESS);
+            } else {
+                throw new Error('Failed to generate nebari guide. The AI may be busy or the image unclear. Please try again.');
+            }
+        } catch (e: any) {
+            setError(e.message);
+            setStatus(AppStatus.ERROR);
+        }
+    };
+
+    return (
+        <div className="space-y-8 max-w-7xl mx-auto">
+            <header className="text-center">
+                <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+                    <RootsIcon className="w-8 h-8 text-orange-800" />
+                    Nebari Developer
+                </h2>
+                <p className="mt-4 text-lg leading-8 text-stone-600">
+                    Get an AI-generated plan to develop the perfect surface roots (Nebari) for your bonsai.
+                </p>
+            </header>
+            
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
+                {/* Left Column: Controls */}
+                <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200 space-y-4 lg:col-span-1">
+                     <div>
+                        <label className="block text-sm font-medium text-stone-900">1. Upload Photo of Tree Base</label>
+                        <div onClick={() => fileInputRef.current?.click()} className="mt-1 flex justify-center p-4 rounded-lg border-2 border-dashed border-stone-300 hover:border-orange-600 transition-colors cursor-pointer">
+                           <div className="text-center">
+                               {image ? <p className="text-green-700 font-semibold">Image Loaded!</p> : <UploadCloudIcon className="mx-auto h-10 w-10 text-stone-400" />}
+                                <p className="mt-1 text-sm text-stone-600">{image ? 'Click to change image' : 'Click to upload'}</p>
+                           </div>
+                           <input ref={fileInputRef} type="file" className="sr-only" onChange={handleFileChange} accept="image/png, image/jpeg" />
+                        </div>
+                    </div>
+                    
+                     <button onClick={handleGenerate} disabled={status === AppStatus.ANALYZING || !image || !aiConfigured} className="w-full flex items-center justify-center gap-2 rounded-md bg-orange-800 px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-orange-700 disabled:bg-stone-400 disabled:cursor-not-allowed">
+                       <SparklesIcon className="w-5 h-5"/> {status === AppStatus.ANALYZING ? 'Developing Plan...' : '2. Generate Nebari Plan'}
+                    </button>
+                    {error && <p className="text-sm text-red-600 mt-2 bg-red-50 p-3 rounded-md">{error}</p>}
+                    {!aiConfigured && (
+                        <div className="mt-4 p-3 bg-yellow-50 text-yellow-800 rounded-lg border border-yellow-200 text-center">
+                            <p className="text-sm">
+                            Please set your Gemini API key in the{' '}
+                            <button onClick={() => setActiveView('settings')} className="font-bold underline hover:text-yellow-900">
+                                Settings page
+                            </button>
+                            {' '}to enable this feature.
+                            </p>
+                        </div>
+                    )}
+                </div>
+
+                {/* Right Column: Canvas */}
+                <div className="bg-white p-4 rounded-xl shadow-lg border border-stone-200 lg:col-span-2">
+                    <div ref={imageContainerRef} className="relative w-full aspect-w-4 aspect-h-3 bg-stone-100 rounded-lg overflow-hidden">
+                        {image ? (
+                            <>
+                                <img src={image.preview} alt="Bonsai Nebari" className="w-full h-full object-contain" />
+                                {blueprint && (
+                                    <svg
+                                        className="absolute top-0 left-0 w-full h-full"
+                                        viewBox={`0 0 ${viewBox.width} ${viewBox.height}`}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                        <defs>
+                                            <marker id="arrow-head-blue" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+                                                <path d="M 0 0 L 10 5 L 0 10 z" fill="#3b82f6" />
+                                            </marker>
+                                            <marker id="arrow-head-orange" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+                                                <path d="M 0 0 L 10 5 L 0 10 z" fill="#f97316" />
+                                            </marker>
+                                        </defs>
+                                        {blueprint.annotations.map((anno, i) => (
+                                            <SvgAnnotation key={i} annotation={anno} scale={scale} />
+                                        ))}
+                                    </svg>
+                                )}
+                            </>
+                        ) : (
+                            <div className="flex items-center justify-center h-full">
+                                <p className="text-stone-500">Your image and root plan will appear here</p>
+                            </div>
+                        )}
+                        {status === AppStatus.ANALYZING && <div className="absolute inset-0 flex items-center justify-center bg-white/75"><Spinner text="Yuki is inspecting the roots..." /></div>}
+                    </div>
+                     {blueprint && status === AppStatus.SUCCESS && (
+                         <div className="mt-4 p-4 bg-orange-50 border-l-4 border-orange-500 rounded-r-lg">
+                            <h4 className="font-bold text-orange-800">Yuki's Nebari Strategy</h4>
+                            <p className="text-sm text-orange-700 mt-1">{blueprint.summary}</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default NebariDeveloperView;

views/PaywallView.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+// ====================================================================================
+// NOTE: This component is no longer used in the application.
+// The app now uses a secret-based login system. See LoginView.tsx.
+// This file is kept to avoid breaking imports but its content is non-functional.
+// ====================================================================================
+
+const PaywallView: React.FC = () => {
+    return (
+        <div className="flex items-center justify-center h-screen bg-stone-100">
+            <div className="text-center p-8">
+                <h1 className="text-2xl font-bold">Paywall Deprecated</h1>
+                <p>This view is currently not in use.</p>
+            </div>
+        </div>
+    );
+};
+
+export default PaywallView;

views/PestLibraryView.tsx

@@ -0,0 +1,128 @@
+import React, { useState, useCallback } from 'react';
+import { BugIcon, SparklesIcon, AlertTriangleIcon } from '../components/icons';
+import Spinner from '../components/Spinner';
+import { generatePestLibrary, isAIConfigured } from '../services/geminiService';
+import type { PestLibraryEntry, View } from '../types';
+import { AppStatus } from '../types';
+
+interface PestLibraryViewProps {
+  setActiveView: (view: View) => void;
+}
+
+const PestLibraryView: React.FC<PestLibraryViewProps> = ({ setActiveView }) => {
+  const [status, setStatus] = useState<AppStatus>(AppStatus.IDLE);
+  const [location, setLocation] = useState<string>('');
+  const [pestData, setPestData] = useState<PestLibraryEntry[] | null>(null);
+  const [error, setError] = useState<string>('');
+  const aiConfigured = isAIConfigured();
+
+  const handleGenerate = useCallback(async () => {
+    if (!location.trim()) {
+      setError('Please enter your city or region.');
+      return;
+    }
+    setStatus(AppStatus.ANALYZING);
+    setError('');
+    setPestData(null);
+
+    try {
+      const result = await generatePestLibrary(location);
+      if (result) {
+        setPestData(result);
+        setStatus(AppStatus.SUCCESS);
+      } else {
+        throw new Error('Failed to generate the pest library. The AI may be busy. Please try again.');
+      }
+    } catch (e: any) {
+      setError(e.message);
+      setStatus(AppStatus.ERROR);
+    }
+  }, [location]);
+
+  return (
+    <div className="space-y-8 max-w-4xl mx-auto">
+      <header className="text-center">
+        <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+          <BugIcon className="w-8 h-8 text-red-600" />
+          Regional Pest Library
+        </h2>
+        <p className="mt-4 text-lg leading-8 text-stone-600">
+          Discover common pests and diseases for bonsai in your area to stay one step ahead.
+        </p>
+      </header>
+
+      <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200">
+        <div className="flex flex-col sm:flex-row gap-4">
+          <input
+            type="text"
+            value={location}
+            onChange={(e) => setLocation(e.target.value)}
+            className="block w-full rounded-md border-0 py-2 px-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-green-600 sm:text-sm sm:leading-6"
+            placeholder="e.g., Portland, Oregon"
+            disabled={status === AppStatus.ANALYZING}
+          />
+          <button
+            onClick={handleGenerate}
+            disabled={status === AppStatus.ANALYZING || !aiConfigured}
+            className="flex items-center justify-center gap-2 w-full sm:w-auto rounded-md bg-green-700 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-700 disabled:bg-stone-400 disabled:cursor-not-allowed"
+          >
+            <SparklesIcon className="w-5 h-5" />
+            {status === AppStatus.ANALYZING ? 'Generating...' : 'Generate Library'}
+          </button>
+        </div>
+        {error && <p className="text-sm text-red-600 mt-2">{error}</p>}
+        {!aiConfigured && (
+            <div className="mt-4 p-3 bg-yellow-50 text-yellow-800 rounded-lg border border-yellow-200 text-center">
+                <p className="text-sm">
+                  AI features are disabled. Please set your Gemini API key in the{' '}
+                  <button onClick={() => setActiveView('settings')} className="font-bold underline hover:text-yellow-900">
+                    Settings page
+                  </button>.
+                </p>
+            </div>
+        )}
+      </div>
+
+      {status === AppStatus.ANALYZING && <Spinner text="Yuki is consulting the archives..." />}
+      {status === AppStatus.SUCCESS && pestData && (
+        <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200 space-y-4">
+          <h3 className="text-xl font-bold text-stone-800">Pest & Disease Guide for {location}</h3>
+           {pestData.map((pest, i) => (
+              <details key={i} className="p-4 bg-stone-50 rounded-lg border border-stone-200 group">
+                  <summary className="font-semibold text-stone-800 cursor-pointer flex justify-between items-center">
+                      {pest.name} ({pest.type})
+                      <span className="text-xs text-stone-500 group-open:hidden">Show Details</span>
+                      <span className="text-xs text-stone-500 hidden group-open:inline">Hide Details</span>
+                  </summary>
+                  <div className="mt-4 space-y-3 text-sm text-stone-700">
+                      <p>{pest.description}</p>
+                      <div>
+                          <strong className="font-medium text-stone-800">Symptoms:</strong>
+                          <ul className="list-disc list-inside ml-2">
+                              {pest.symptoms.map((s, idx) => <li key={idx}>{s}</li>)}
+                          </ul>
+                      </div>
+                      <div>
+                          <strong className="font-medium text-stone-800">Organic Treatment:</strong>
+                          <p>{pest.treatment.organic}</p>
+                      </div>
+                        <div>
+                          <strong className="font-medium text-stone-800">Chemical Treatment:</strong>
+                          <p>{pest.treatment.chemical}</p>
+                      </div>
+                  </div>
+              </details>
+          ))}
+        </div>
+      )}
+       {status === AppStatus.ERROR && (
+            <div className="text-center p-8 bg-white rounded-lg shadow-lg border border-red-200 max-w-md mx-auto">
+                <h3 className="text-xl font-semibold text-red-700">An Error Occurred</h3>
+                <p className="text-stone-600 mt-2">{error}</p>
+            </div>
+       )}
+    </div>
+  );
+};
+
+export default PestLibraryView;

views/PotCalculatorView.tsx

@@ -0,0 +1,138 @@
+import React, { useState, useMemo } from 'react';
+import { PotRulerIcon } from '../components/icons';
+
+type Units = 'cm' | 'in';
+type BonsaiStyle = 'Upright' | 'Cascade' | 'Forest' | 'Literati';
+
+const PotCalculatorView: React.FC = () => {
+    const [units, setUnits] = useState<Units>('cm');
+    const [height, setHeight] = useState(30);
+    const [trunkDiameter, setTrunkDiameter] = useState(3);
+    const [style, setStyle] = useState<BonsaiStyle>('Upright');
+
+    const conversionFactor = units === 'in' ? 2.54 : 1;
+
+    const results = useMemo(() => {
+        let length, width, depth, rationale;
+        const h = height;
+        const d = trunkDiameter;
+
+        switch (style) {
+            case 'Cascade':
+                length = h * 0.5;
+                depth = h * 0.6;
+                width = length;
+                rationale = "Cascade pots are tall and often square or hexagonal to visually balance the downward-flowing trunk. The depth and stability are crucial.";
+                break;
+            case 'Forest':
+                length = h * 1.5;
+                depth = d * 0.75;
+                width = length * 0.6;
+                rationale = "Forest plantings require wide, very shallow oval or rectangular trays to create a sense of a landscape and accommodate many root systems.";
+                break;
+            case 'Literati':
+                length = d * 3;
+                depth = d * 1.5;
+                width = length;
+                rationale = "Literati pots are typically small, simple, and often round or unusually shaped. They are understated to emphasize the elegant, sparse trunk line.";
+                break;
+            case 'Upright':
+            default:
+                length = h * 0.66;
+                depth = d;
+                width = length * 0.8;
+                rationale = "For upright styles, the pot length is typically 2/3 of the tree's height. The pot's depth should be equal to the trunk's diameter to provide visual stability.";
+                break;
+        }
+
+        const format = (val: number) => {
+            const converted = val / conversionFactor;
+            return converted.toFixed(1);
+        }
+
+        return {
+            length: format(length),
+            width: format(width),
+            depth: format(depth),
+            rationale,
+        };
+    }, [height, trunkDiameter, style, units, conversionFactor]);
+
+    return (
+        <div className="space-y-8 max-w-4xl mx-auto">
+            <header className="text-center">
+                <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+                    <PotRulerIcon className="w-8 h-8 text-amber-800" />
+                    Pot Ratio Calculator
+                </h2>
+                <p className="mt-4 text-lg leading-8 text-stone-600">
+                    Find the perfect pot size for your bonsai based on traditional aesthetic guidelines.
+                </p>
+            </header>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
+                <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200 space-y-6">
+                    <div>
+                        <div className="flex justify-between items-center mb-2">
+                            <label htmlFor="units" className="font-semibold text-stone-800">Units</label>
+                            <div className="flex gap-1 bg-stone-100 p-1 rounded-lg">
+                                <button onClick={() => setUnits('cm')} className={`px-3 py-1 text-sm font-medium rounded-md ${units === 'cm' ? 'bg-white shadow' : ''}`}>cm</button>
+                                <button onClick={() => setUnits('in')} className={`px-3 py-1 text-sm font-medium rounded-md ${units === 'in' ? 'bg-white shadow' : ''}`}>in</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div>
+                        <label htmlFor="height" className="font-semibold text-stone-800">Tree Height ({units})</label>
+                        <div className="flex items-center gap-4 mt-2">
+                            <input type="range" id="height" min="10" max="200" value={height} onChange={e => setHeight(Number(e.target.value))} className="w-full h-2 bg-stone-200 rounded-lg appearance-none cursor-pointer accent-amber-700" />
+                            <input type="number" value={(height / conversionFactor).toFixed(1)} onChange={e => setHeight(Number(e.target.value) * conversionFactor)} className="w-20 p-2 border rounded-md" />
+                        </div>
+                    </div>
+
+                    <div>
+                        <label htmlFor="trunkDiameter" className="font-semibold text-stone-800">Trunk Diameter ({units})</label>
+                        <div className="flex items-center gap-4 mt-2">
+                            <input type="range" id="trunkDiameter" min="1" max="20" step="0.5" value={trunkDiameter} onChange={e => setTrunkDiameter(Number(e.target.value))} className="w-full h-2 bg-stone-200 rounded-lg appearance-none cursor-pointer accent-amber-700" />
+                            <input type="number" value={(trunkDiameter / conversionFactor).toFixed(1)} onChange={e => setTrunkDiameter(Number(e.target.value) * conversionFactor)} className="w-20 p-2 border rounded-md" />
+                        </div>
+                    </div>
+
+                    <div>
+                        <label htmlFor="style" className="font-semibold text-stone-800">Bonsai Style</label>
+                        <select id="style" value={style} onChange={e => setStyle(e.target.value as BonsaiStyle)} className="w-full mt-2 p-2 border rounded-md bg-white">
+                            <option value="Upright">Formal/Informal Upright</option>
+                            <option value="Cascade">Cascade/Semi-Cascade</option>
+                            <option value="Forest">Forest/Group Planting</option>
+                            <option value="Literati">Literati (Bunjin)</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div className="bg-white p-6 rounded-xl shadow-lg border-2 border-amber-600 space-y-4">
+                    <h3 className="text-xl font-bold text-center text-stone-900">Recommended Pot Size</h3>
+                    <div className="flex justify-around text-center">
+                        <div>
+                            <p className="text-3xl font-bold text-amber-800">{results.length}</p>
+                            <p className="text-sm text-stone-600">Length ({units})</p>
+                        </div>
+                         <div>
+                            <p className="text-3xl font-bold text-amber-800">{results.width}</p>
+                            <p className="text-sm text-stone-600">Width ({units})</p>
+                        </div>
+                        <div>
+                            <p className="text-3xl font-bold text-amber-800">{results.depth}</p>
+                            <p className="text-sm text-stone-600">Depth ({units})</p>
+                        </div>
+                    </div>
+                    <div className="mt-4 pt-4 border-t-2 border-dashed">
+                        <h4 className="font-semibold text-stone-800">Rationale</h4>
+                        <p className="text-sm text-stone-700 mt-1">{results.rationale}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default PotCalculatorView;

views/SeasonalGuideView.tsx

@@ -0,0 +1,140 @@
+import React, { useState, useCallback } from 'react';
+import { LeafIcon, SparklesIcon, SunIcon, WindIcon, SnowflakeIcon, SunriseIcon, AlertTriangleIcon } from '../components/icons';
+import Spinner from '../components/Spinner';
+import { generateSeasonalGuide, isAIConfigured } from '../services/geminiService';
+import type { SeasonalGuide, View } from '../types';
+import { AppStatus } from '../types';
+
+const seasonIcons: { [key: string]: React.FC<React.SVGProps<SVGSVGElement>> } = {
+    Spring: SunriseIcon,
+    Summer: SunIcon,
+    Autumn: WindIcon,
+    Winter: SnowflakeIcon,
+};
+
+interface SeasonalGuideViewProps {
+  setActiveView: (view: View) => void;
+}
+
+const SeasonalGuideView: React.FC<SeasonalGuideViewProps> = ({ setActiveView }) => {
+  const [status, setStatus] = useState<AppStatus>(AppStatus.IDLE);
+  const [species, setSpecies] = useState<string>('');
+  const [location, setLocation] = useState<string>('');
+  const [guideData, setGuideData] = useState<SeasonalGuide[] | null>(null);
+  const [error, setError] = useState<string>('');
+  const aiConfigured = isAIConfigured();
+
+  const handleGenerate = useCallback(async () => {
+    if (!species.trim()) {
+      setError('Please enter a bonsai species.');
+      return;
+    }
+    if (!location.trim()) {
+      setError('Please enter your city or region.');
+      return;
+    }
+    setStatus(AppStatus.ANALYZING);
+    setError('');
+    setGuideData(null);
+
+    try {
+      const result = await generateSeasonalGuide(species, location);
+      if (result) {
+        setGuideData(result);
+        setStatus(AppStatus.SUCCESS);
+      } else {
+        throw new Error('Failed to generate the seasonal guide. The AI may be busy. Please try again.');
+      }
+    } catch(e: any) {
+      setError(e.message);
+      setStatus(AppStatus.ERROR);
+    }
+  }, [species, location]);
+
+  return (
+    <div className="space-y-8 max-w-4xl mx-auto">
+      <header className="text-center">
+        <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+          <LeafIcon className="w-8 h-8 text-green-600" />
+          Seasonal Care Guides
+        </h2>
+        <p className="mt-4 text-lg leading-8 text-stone-600">
+          Get a year-round plan for any bonsai species, tailored to your local climate.
+        </p>
+      </header>
+
+      <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200 space-y-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <input
+            type="text"
+            value={species}
+            onChange={(e) => setSpecies(e.target.value)}
+            className="block w-full rounded-md border-0 py-2 px-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-green-600"
+            placeholder="e.g., Ficus Retusa"
+            disabled={status === AppStatus.ANALYZING}
+          />
+          <input
+            type="text"
+            value={location}
+            onChange={(e) => setLocation(e.target.value)}
+            className="block w-full rounded-md border-0 py-2 px-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-green-600"
+            placeholder="e.g., Miami, Florida"
+            disabled={status === AppStatus.ANALYZING}
+          />
+        </div>
+        <button
+          onClick={handleGenerate}
+          disabled={status === AppStatus.ANALYZING || !aiConfigured}
+          className="w-full flex items-center justify-center gap-2 rounded-md bg-green-700 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-700 disabled:bg-stone-400 disabled:cursor-not-allowed"
+        >
+          <SparklesIcon className="w-5 h-5" />
+          {status === AppStatus.ANALYZING ? 'Generating...' : 'Generate Guide'}
+        </button>
+        {error && <p className="text-sm text-red-600 mt-2">{error}</p>}
+        {!aiConfigured && (
+            <div className="mt-4 p-3 bg-yellow-50 text-yellow-800 rounded-lg border border-yellow-200 text-center">
+                <p className="text-sm">
+                  AI features are disabled. Please set your Gemini API key in the{' '}
+                  <button onClick={() => setActiveView('settings')} className="font-bold underline hover:text-yellow-900">
+                    Settings page
+                  </button>.
+                </p>
+            </div>
+        )}
+      </div>
+
+      {status === AppStatus.ANALYZING && <Spinner text="Yuki is reading the almanac..." />}
+      {status === AppStatus.SUCCESS && guideData && (
+        <div className="space-y-6">
+           <h3 className="text-2xl font-bold text-stone-800 text-center">Seasonal Guide for a {species} in {location}</h3>
+           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {guideData.sort((a,b) => ['Spring', 'Summer', 'Autumn', 'Winter'].indexOf(a.season) - ['Spring', 'Summer', 'Autumn', 'Winter'].indexOf(b.season)).map(season => {
+                  const Icon = seasonIcons[season.season] || LeafIcon;
+                  return (
+                      <div key={season.season} className="bg-white rounded-xl shadow-md border border-stone-200 p-6">
+                          <div className="flex items-center gap-3 mb-4">
+                              <Icon className="w-7 h-7 text-green-700" />
+                              <h3 className="text-xl font-semibold text-stone-800">{season.season}</h3>
+                          </div>
+                          <div className="space-y-3 text-stone-600">
+                              <p className="italic text-stone-600 mb-4">{season.summary}</p>
+                              <ul className="space-y-2">
+                                  {season.tasks.map(task => (
+                                      <li key={task.task} className="flex items-center justify-between text-sm">
+                                          <span>{task.task}</span>
+                                          <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${task.importance === 'High' ? 'bg-red-100 text-red-800' : task.importance === 'Medium' ? 'bg-yellow-100 text-yellow-800' : 'bg-blue-100 text-blue-800'}`}>{task.importance}</span>
+                                      </li>
+                                  ))}
+                              </ul>
+                          </div>
+                      </div>
+                  )
+              })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SeasonalGuideView;

views/SettingsView.tsx

@@ -0,0 +1,232 @@
+import React, { useContext, useRef, useState, useEffect } from 'react';
+import { SettingsIcon, AlertTriangleIcon, Trash2Icon, KeyIcon } from '../components/icons';
+import { AuthContext } from '../context/AuthContext';
+import { useLocalStorage } from '../hooks/useLocalStorage';
+import type { BonsaiTree, UserTool } from '../types';
+import { reinitializeAI } from '../services/geminiService';
+
+const SettingsView: React.FC = () => {
+    const { logout, updateCredentials } = useContext(AuthContext);
+    const [, setTrees] = useLocalStorage<BonsaiTree[]>('bonsai-diary-trees', []);
+    const [, setToolkit] = useLocalStorage<UserTool[]>('user-toolkit', []);
+    const importFileRef = useRef<HTMLInputElement>(null);
+
+    const [apiKey, setApiKey] = useState('');
+    const [saveStatus, setSaveStatus] = useState<'idle' | 'saved'>('idle');
+
+    // State for credentials change
+    const [currentPassword, setCurrentPassword] = useState('');
+    const [newLoginName, setNewLoginName] = useState('');
+    const [newPassword, setNewPassword] = useState('');
+    const [credentialStatus, setCredentialStatus] = useState<{ type: 'idle' | 'success' | 'error', message: string }>({ type: 'idle', message: '' });
+    const [isUpdatingCreds, setIsUpdatingCreds] = useState(false);
+
+    useEffect(() => {
+        const storedKey = window.localStorage.getItem('gemini-api-key') || '';
+        setApiKey(storedKey);
+    }, []);
+
+    const handleSaveKey = () => {
+        window.localStorage.setItem('gemini-api-key', apiKey);
+        reinitializeAI();
+        setSaveStatus('saved');
+        setTimeout(() => setSaveStatus('idle'), 2000);
+    };
+
+    const handleClearKey = () => {
+        if (window.confirm('Are you sure you want to clear your API key?')) {
+            window.localStorage.removeItem('gemini-api-key');
+            setApiKey('');
+            reinitializeAI();
+        }
+    };
+    
+    const handleCredentialChange = (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsUpdatingCreds(true);
+        const result = updateCredentials(currentPassword, newLoginName, newPassword);
+        if (result.success) {
+            setCredentialStatus({ type: 'success', message: "Credentials updated! You will be logged out to sign in again." });
+            setTimeout(() => {
+                logout();
+            }, 2000);
+        } else {
+            setCredentialStatus({ type: 'error', message: result.message });
+            setTimeout(() => setCredentialStatus({ type: 'idle', message: '' }), 3000);
+            setIsUpdatingCreds(false);
+        }
+    };
+
+    const handleExport = () => {
+        const treeKey = `yuki-app-bonsai-diary-trees`;
+        const toolKey = `yuki-app-user-toolkit`;
+
+        const data = {
+            trees: JSON.parse(window.localStorage.getItem(treeKey) || '[]'),
+            toolkit: JSON.parse(window.localStorage.getItem(toolKey) || '[]'),
+        };
+
+        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `yuki-bonsai-backup-${new Date().toISOString().split('T')[0]}.json`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    };
+
+    const handleImport = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            try {
+                const text = e.target?.result;
+                if (typeof text !== 'string') throw new Error("File is not readable");
+                const data = JSON.parse(text);
+
+                if (Array.isArray(data.trees) && Array.isArray(data.toolkit)) {
+                    if(window.confirm("This will overwrite your current data. Are you sure you want to proceed?")) {
+                        setTrees(data.trees);
+                        setToolkit(data.toolkit);
+                        alert("Data imported successfully!");
+                    }
+                } else {
+                    throw new Error("Invalid file format.");
+                }
+            } catch (err) {
+                alert(`Failed to import data: ${err instanceof Error ? err.message : "Unknown error"}`);
+            }
+        };
+        reader.readAsText(file);
+        event.target.value = ''; // Reset file input
+    };
+
+    const handleDelete = () => {
+        if (window.confirm("DANGER: Are you absolutely sure you want to delete all your trees and toolkit data? This action cannot be undone.")) {
+            if (window.confirm("FINAL WARNING: This is your last chance. All data will be permanently deleted. Continue?")) {
+                setTrees([]);
+                setToolkit([]);
+                alert("All your data has been deleted.");
+                logout();
+            }
+        }
+    };
+
+
+    return (
+        <div className="space-y-8 max-w-2xl mx-auto">
+            <header className="text-center">
+                <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+                    <SettingsIcon className="w-8 h-8 text-stone-600" />
+                    Settings
+                </h2>
+                <p className="mt-4 text-lg leading-8 text-stone-600">
+                    Manage your application data and preferences.
+                </p>
+            </header>
+            
+            <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200 space-y-4">
+                <h3 className="text-xl font-semibold text-stone-800 flex items-center gap-2"><KeyIcon className="w-5 h-5"/> Change Login Credentials</h3>
+                <p className="text-sm text-stone-600">
+                    Update your login name and secret password. If you haven't set custom credentials yet, the "Current Secret Password" is the one you originally received. After updating, you will be logged out.
+                </p>
+                <form onSubmit={handleCredentialChange} className="space-y-3">
+                    <div>
+                        <label className="text-sm font-medium text-stone-700">Current Secret Password</label>
+                        <input
+                            type="password"
+                            value={currentPassword}
+                            onChange={(e) => setCurrentPassword(e.target.value)}
+                            className="mt-1 block w-full rounded-md border-0 py-2 px-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 focus:ring-2 focus:ring-inset focus:ring-green-600"
+                            required
+                        />
+                    </div>
+                    <div>
+                        <label className="text-sm font-medium text-stone-700">New Login Name</label>
+                        <input
+                            type="text"
+                            value={newLoginName}
+                            onChange={(e) => setNewLoginName(e.target.value)}
+                            className="mt-1 block w-full rounded-md border-0 py-2 px-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 focus:ring-2 focus:ring-inset focus:ring-green-600"
+                            placeholder="e.g., my-bonsai-corner"
+                            required
+                        />
+                    </div>
+                    <div>
+                        <label className="text-sm font-medium text-stone-700">New Secret Password</label>
+                        <input
+                            type="password"
+                            value={newPassword}
+                            onChange={(e) => setNewPassword(e.target.value)}
+                            className="mt-1 block w-full rounded-md border-0 py-2 px-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 focus:ring-2 focus:ring-inset focus:ring-green-600"
+                            placeholder="Enter a strong new password"
+                            required
+                        />
+                    </div>
+                    <button type="submit" disabled={isUpdatingCreds} className="w-full bg-green-700 text-white font-semibold py-2 px-4 rounded-lg hover:bg-green-600 disabled:bg-stone-400">
+                        {isUpdatingCreds ? 'Updating...' : 'Update Credentials & Log Out'}
+                    </button>
+                    {credentialStatus.type === 'success' && <p className="text-sm text-center text-green-600">{credentialStatus.message}</p>}
+                    {credentialStatus.type === 'error' && <p className="text-sm text-center text-red-600">{credentialStatus.message}</p>}
+                </form>
+            </div>
+
+            <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200 space-y-4">
+                <h3 className="text-xl font-semibold text-stone-800">Gemini API Key</h3>
+                <p className="text-sm text-stone-600">
+                    To use the AI features, you need a Google Gemini API key. You can generate a free key from{' '}
+                    <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer" className="font-semibold text-green-700 hover:underline">
+                        Google AI Studio
+                    </a>.
+                </p>
+                <div className="flex items-center gap-2">
+                    <input 
+                        type="password"
+                        value={apiKey}
+                        onChange={(e) => setApiKey(e.target.value)}
+                        className="block w-full rounded-md border-0 py-2 px-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-green-600 sm:text-sm sm:leading-6"
+                        placeholder="Enter your Gemini API key"
+                    />
+                    <button onClick={handleSaveKey} className="bg-green-700 text-white font-semibold py-2 px-4 rounded-lg hover:bg-green-600 whitespace-nowrap">
+                        {saveStatus === 'saved' ? 'Saved!' : 'Save Key'}
+                    </button>
+                    <button onClick={handleClearKey} title="Clear API Key" className="bg-stone-200 text-stone-700 p-2 rounded-lg hover:bg-stone-300">
+                        <Trash2Icon className="w-5 h-5"/>
+                    </button>
+                </div>
+            </div>
+
+            <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200 space-y-4">
+                <h3 className="text-xl font-semibold text-stone-800">Data Management</h3>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <button onClick={handleExport} className="p-4 bg-blue-100 text-blue-700 font-semibold rounded-lg hover:bg-blue-200 transition-colors">
+                        Export My Data
+                    </button>
+                    <button onClick={() => importFileRef.current?.click()} className="p-4 bg-green-100 text-green-700 font-semibold rounded-lg hover:bg-green-200 transition-colors">
+                        Import Data
+                    </button>
+                     <input type="file" ref={importFileRef} onChange={handleImport} accept=".json" className="hidden" />
+                </div>
+            </div>
+
+             <div className="bg-red-50 p-6 rounded-xl shadow-lg border border-red-200 space-y-3">
+                <div className="flex items-center gap-3">
+                    <AlertTriangleIcon className="w-8 h-8 text-red-600 flex-shrink-0" />
+                    <div>
+                        <h3 className="text-xl font-semibold text-red-800">Danger Zone</h3>
+                        <p className="text-sm text-red-700">This action is irreversible. Please export your data first if you want to keep a backup.</p>
+                    </div>
+                </div>
+                 <button onClick={handleDelete} className="w-full p-4 bg-red-600 text-white font-bold rounded-lg hover:bg-red-700 transition-colors">
+                    Delete All My Data & Log Out
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default SettingsView;

views/SoilAnalyzerView.tsx

@@ -0,0 +1,187 @@
+
+
+import React, { useState, useRef } from 'react';
+import { FilterIcon, SparklesIcon, UploadCloudIcon, DropletIcon, AlertTriangleIcon } from '../components/icons';
+import Spinner from '../components/Spinner';
+import { analyzeSoilComposition, isAIConfigured } from '../services/geminiService';
+import type { SoilAnalysis, View } from '../types';
+import { AppStatus } from '../types';
+
+const SoilAnalyzerView: React.FC<{ setActiveView: (view: View) => void }> = ({ setActiveView }) => {
+    const [status, setStatus] = useState<AppStatus>(AppStatus.IDLE);
+    const [image, setImage] = useState<{ preview: string; base64: string } | null>(null);
+    const [species, setSpecies] = useState<string>('');
+    const [location, setLocation] = useState<string>('');
+    const [result, setResult] = useState<SoilAnalysis | null>(null);
+    const [error, setError] = useState<string>('');
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const aiConfigured = isAIConfigured();
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            if (file.size > 4 * 1024 * 1024) { // 4MB limit
+                setError("File size exceeds 4MB. Please upload a smaller image.");
+                return;
+            }
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const base64String = (reader.result as string).split(',')[1];
+                setImage({ preview: reader.result as string, base64: base64String });
+                setError('');
+                setStatus(AppStatus.IDLE);
+                setResult(null);
+            };
+            reader.onerror = () => setError("Failed to read the file.");
+            reader.readAsDataURL(file);
+        }
+    };
+
+    const handleAnalyze = async () => {
+        if (!image) {
+            setError("Please upload an image of your soil mix.");
+            return;
+        }
+        if (!species.trim()) {
+            setError("Please enter the target species.");
+            return;
+        }
+        if (!location.trim()) {
+            setError("Please enter your location.");
+            return;
+        }
+
+        setStatus(AppStatus.ANALYZING);
+        setError('');
+        setResult(null);
+
+        try {
+            const analysisResult = await analyzeSoilComposition(image.base64, species, location);
+            if (analysisResult) {
+                setResult(analysisResult);
+                setStatus(AppStatus.SUCCESS);
+            } else {
+                throw new Error("Could not analyze the soil. The AI may be busy or the image may not be clear enough. Please try again.");
+            }
+        } catch (e: any) {
+            setError(e.message);
+            setStatus(AppStatus.ERROR);
+        }
+    };
+
+    const renderResults = () => {
+        if (!result) return null;
+
+        const ratingColors = {
+            Poor: 'bg-red-500',
+            Average: 'bg-yellow-500',
+            Good: 'bg-blue-500',
+            Excellent: 'bg-green-500',
+            Low: 'bg-orange-500',
+            Medium: 'bg-yellow-500',
+            High: 'bg-blue-500'
+        };
+
+        return (
+            <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200 space-y-6">
+                <h3 className="text-xl font-bold text-center text-stone-800">Soil Analysis Results</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <h4 className="font-semibold text-stone-800 mb-2">Estimated Composition</h4>
+                        <div className="space-y-3">
+                            {result.components.map(comp => (
+                                <div key={comp.name}>
+                                    <div className="flex justify-between items-center mb-1">
+                                        <span className="font-medium text-stone-800">{comp.name}</span>
+                                        <span className="font-semibold text-amber-800">{comp.percentage}%</span>
+                                    </div>
+                                    <div className="w-full bg-stone-200 rounded-full h-2.5">
+                                        <div className="bg-amber-600 h-2.5 rounded-full" style={{ width: `${comp.percentage}%` }}></div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                    <div className="space-y-4">
+                        <h4 className="font-semibold text-stone-800 mb-2">Properties</h4>
+                        <div className="flex items-center gap-3">
+                            <strong className="w-32">Drainage:</strong>
+                            <span className={`px-3 py-1 text-sm font-medium text-white rounded-full ${ratingColors[result.drainageRating]}`}>{result.drainageRating}</span>
+                        </div>
+                        <div className="flex items-center gap-3">
+                             <strong className="w-32">Water Retention:</strong>
+                            <span className={`px-3 py-1 text-sm font-medium text-white rounded-full ${ratingColors[result.waterRetention]}`}>{result.waterRetention}</span>
+                        </div>
+                    </div>
+                </div>
+                 <div className="mt-4 p-4 bg-stone-50 rounded-lg">
+                    <h5 className="font-semibold text-stone-800">Suitability for {species}</h5>
+                    <p className="text-sm text-stone-600 mt-1">{result.suitabilityAnalysis}</p>
+                </div>
+                <div className="mt-4 p-4 bg-green-50 rounded-lg">
+                    <h5 className="font-semibold text-green-800">Improvement Suggestions</h5>
+                    <p className="text-sm text-green-700 mt-1">{result.improvementSuggestions}</p>
+                </div>
+                 <button onClick={() => setStatus(AppStatus.IDLE)} className="w-full mt-4 bg-stone-200 text-stone-700 font-semibold py-2 px-4 rounded-lg hover:bg-stone-300 transition-colors">
+                    Analyze Another Mix
+                </button>
+            </div>
+        );
+    }
+    
+    return (
+        <div className="space-y-8 max-w-3xl mx-auto">
+            <header className="text-center">
+                <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+                    <FilterIcon className="w-8 h-8 text-amber-700" />
+                    Soil Analyzer
+                </h2>
+                <p className="mt-4 text-lg leading-8 text-stone-600">
+                    Take a photo of your bonsai soil to get an AI-powered analysis of its composition and suitability.
+                </p>
+            </header>
+
+            {status !== AppStatus.SUCCESS && (
+                 <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200 space-y-4">
+                    <div onClick={() => fileInputRef.current?.click()} className="flex justify-center rounded-lg border-2 border-dashed border-stone-300 px-6 py-10 hover:border-amber-600 transition-colors cursor-pointer">
+                        <div className="text-center">
+                            {image ? <img src={image.preview} alt="Soil preview" className="mx-auto h-40 w-auto rounded-md object-cover" /> : (
+                            <>
+                                <UploadCloudIcon className="mx-auto h-12 w-12 text-stone-400" />
+                                <p className="mt-2 text-sm font-semibold text-amber-700">Upload a close-up photo of your soil</p>
+                                <p className="text-xs text-stone-500">PNG, JPG up to 4MB</p>
+                            </> )}
+                        </div>
+                        <input ref={fileInputRef} type="file" className="sr-only" onChange={handleFileChange} accept="image/png, image/jpeg" />
+                    </div>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                         <input type="text" value={species} onChange={(e) => setSpecies(e.target.value)} className="block w-full rounded-md border-0 py-2 px-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-amber-600" placeholder="Target Species (e.g., Juniper)" />
+                         <input type="text" value={location} onChange={(e) => setLocation(e.target.value)} className="block w-full rounded-md border-0 py-2 px-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-amber-600" placeholder="Your Location (e.g., Phoenix, AZ)" />
+                    </div>
+                    {error && <p className="text-sm text-red-600">{error}</p>}
+                    <button onClick={handleAnalyze} disabled={!image || status === AppStatus.ANALYZING || !aiConfigured} className="w-full mt-2 flex items-center justify-center gap-2 rounded-md bg-amber-700 px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-amber-600 disabled:bg-stone-400 disabled:cursor-not-allowed">
+                       <SparklesIcon className="w-5 h-5"/> {status === AppStatus.ANALYZING ? 'Analyzing...' : 'Analyze Soil'}
+                    </button>
+                    {!aiConfigured && (
+                        <div className="mt-4 p-3 bg-yellow-50 text-yellow-800 rounded-lg border border-yellow-200 text-center">
+                            <p className="text-sm">
+                            Please set your Gemini API key in the{' '}
+                            <button onClick={() => setActiveView('settings')} className="font-bold underline hover:text-yellow-900">
+                                Settings page
+                            </button>
+                            {' '}to enable this feature.
+                            </p>
+                        </div>
+                    )}
+                </div>
+            )}
+            
+            {status === AppStatus.ANALYZING && <Spinner text="Yuki is sifting through the details..." />}
+            {status === AppStatus.SUCCESS && renderResults()}
+            {status === AppStatus.ERROR && <p className="text-center text-red-600 p-4 bg-red-50 rounded-md">{error}</p>}
+
+        </div>
+    );
+};
+
+export default SoilAnalyzerView;

views/SoilVolumeCalculatorView.tsx

@@ -0,0 +1,151 @@
+
+import React, { useState, useMemo } from 'react';
+import { ShovelIcon, PlusCircleIcon, Trash2Icon } from '../components/icons';
+
+type PotShape = 'rectangular' | 'round';
+type Units = 'cm' | 'in';
+
+const SoilVolumeCalculatorView: React.FC = () => {
+    const [units, setUnits] = useState<Units>('in');
+    const [shape, setShape] = useState<PotShape>('rectangular');
+    const [dimensions, setDimensions] = useState({ length: 12, width: 8, depth: 4, diameter: 10 });
+    const [recipe, setRecipe] = useState([
+        { id: 1, name: 'Akadama', percentage: 40 },
+        { id: 2, name: 'Pumice', percentage: 30 },
+        { id: 3, name: 'Lava Rock', percentage: 30 },
+    ]);
+
+    const totalPercentage = useMemo(() => recipe.reduce((sum, item) => sum + item.percentage, 0), [recipe]);
+
+    const volumeCm3 = useMemo(() => {
+        const d = dimensions;
+        const toCm = units === 'in' ? 2.54 : 1;
+        if (shape === 'rectangular') {
+            return (d.length * toCm) * (d.width * toCm) * (d.depth * toCm);
+        } else { // round
+            const radius = (d.diameter * toCm) / 2;
+            return Math.PI * (radius * radius) * (d.depth * toCm);
+        }
+    }, [dimensions, shape, units]);
+
+    const handleRecipeChange = (id: number, field: 'name' | 'percentage', value: string | number) => {
+        setRecipe(prev => prev.map(item => item.id === id ? { ...item, [field]: value } : item));
+    };
+
+    const addComponent = () => {
+        setRecipe(prev => [...prev, { id: Date.now(), name: 'New Component', percentage: 0 }]);
+    };
+
+    const removeComponent = (id: number) => {
+        setRecipe(prev => prev.filter(item => item.id !== id));
+    };
+
+    const renderVolume = (volumeLiters: number) => (
+        <div className="text-sm text-stone-600">
+            <span>{volumeLiters.toFixed(2)} L</span> /&nbsp;
+            <span>{(volumeLiters * 1.05669).toFixed(2)} qts</span> /&nbsp;
+            <span>{(volumeLiters * 0.264172).toFixed(2)} gal</span>
+        </div>
+    );
+
+    return (
+        <div className="space-y-8 max-w-4xl mx-auto">
+            <header className="text-center">
+                <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+                    <ShovelIcon className="w-8 h-8 text-orange-900" />
+                    Soil Mix Calculator
+                </h2>
+                <p className="mt-4 text-lg leading-8 text-stone-600">
+                    Mix the perfect amount of soil for your pot. No more waste or running out halfway through repotting.
+                </p>
+            </header>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
+                <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200 space-y-6">
+                     <div>
+                        <h3 className="font-semibold text-stone-800 mb-2">1. Pot Dimensions</h3>
+                         <div className="flex gap-4 mb-4">
+                            <div className="flex-1">
+                                <label className="text-sm font-medium">Shape</label>
+                                <select value={shape} onChange={e => setShape(e.target.value as PotShape)} className="w-full mt-1 p-2 border rounded-md bg-white">
+                                    <option value="rectangular">Rectangular</option>
+                                    <option value="round">Round</option>
+                                </select>
+                            </div>
+                            <div className="flex-1">
+                                <label className="text-sm font-medium">Units</label>
+                                <select value={units} onChange={e => setUnits(e.target.value as Units)} className="w-full mt-1 p-2 border rounded-md bg-white">
+                                    <option value="cm">Centimeters</option>
+                                    <option value="in">Inches</option>
+                                </select>
+                            </div>
+                         </div>
+                         <div className="grid grid-cols-2 gap-4">
+                            {shape === 'rectangular' ? (
+                                <>
+                                    <div><label>Length</label><input type="number" value={dimensions.length} onChange={e => setDimensions(d => ({...d, length: Number(e.target.value)}))} className="w-full mt-1 p-2 border rounded-md" /></div>
+                                    <div><label>Width</label><input type="number" value={dimensions.width} onChange={e => setDimensions(d => ({...d, width: Number(e.target.value)}))} className="w-full mt-1 p-2 border rounded-md" /></div>
+                                </>
+                            ) : (
+                                <div><label>Diameter</label><input type="number" value={dimensions.diameter} onChange={e => setDimensions(d => ({...d, diameter: Number(e.target.value)}))} className="w-full mt-1 p-2 border rounded-md" /></div>
+                            )}
+                             <div><label>Depth</label><input type="number" value={dimensions.depth} onChange={e => setDimensions(d => ({...d, depth: Number(e.target.value)}))} className="w-full mt-1 p-2 border rounded-md" /></div>
+                         </div>
+                    </div>
+
+                    <div>
+                        <h3 className="font-semibold text-stone-800 mb-2">2. Soil Recipe</h3>
+                        <div className="space-y-2">
+                           {recipe.map(item => (
+                               <div key={item.id} className="flex items-center gap-2">
+                                   <input type="text" value={item.name} onChange={e => handleRecipeChange(item.id, 'name', e.target.value)} className="w-full p-2 border rounded-md" />
+                                   <input type="number" value={item.percentage} onChange={e => handleRecipeChange(item.id, 'percentage', Number(e.target.value))} className="w-24 p-2 border rounded-md" />
+                                   <span className="font-bold text-stone-500">%</span>
+                                   <button onClick={() => removeComponent(item.id)} className="p-2 text-red-500 hover:bg-red-100 rounded-md"><Trash2Icon className="w-5 h-5"/></button>
+                               </div>
+                           ))}
+                        </div>
+                        <button onClick={addComponent} className="mt-2 flex items-center gap-2 text-sm font-semibold text-green-700 hover:text-green-600">
+                           <PlusCircleIcon className="w-5 h-5"/> Add Component
+                        </button>
+                        <div className="mt-4 w-full bg-stone-200 rounded-full h-2.5">
+                            <div className={`h-2.5 rounded-full ${totalPercentage > 100 ? 'bg-red-500' : 'bg-green-600'}`} style={{ width: `${Math.min(100, totalPercentage)}%` }}></div>
+                        </div>
+                        <p className={`text-center text-sm mt-1 font-bold ${totalPercentage !== 100 ? 'text-red-600 animate-pulse' : 'text-green-700'}`}>
+                           Total: {totalPercentage}%
+                        </p>
+                    </div>
+                </div>
+
+                <div className="bg-white p-6 rounded-xl shadow-lg border-2 border-orange-800 space-y-4">
+                    <h3 className="text-xl font-bold text-center text-stone-900">Component Volumes Needed</h3>
+                    <div className="text-center">
+                         <p className="text-stone-600">Total Pot Volume:</p>
+                         <p className="font-bold text-lg text-orange-900">{renderVolume(volumeCm3 / 1000)}</p>
+                    </div>
+                    <div className="divide-y divide-stone-200 border-t pt-4">
+                        {recipe.map(item => {
+                            const componentVolumeL = (volumeCm3 / 1000) * (item.percentage / 100);
+                            return (
+                                <div key={item.id} className="py-3">
+                                    <div className="flex justify-between items-center font-bold">
+                                        <span className="text-stone-800">{item.name}</span>
+                                        <span className="text-orange-900">{item.percentage}%</span>
+                                    </div>
+                                    <div className="text-right">{renderVolume(componentVolumeL)}</div>
+                                </div>
+                            )
+                        })}
+                    </div>
+                     {totalPercentage !== 100 && (
+                        <p className="text-center text-red-600 text-sm font-semibold p-2 bg-red-50 rounded-md">
+                           Your recipe percentages must add up to 100% for an accurate calculation.
+                        </p>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SoilVolumeCalculatorView;

views/SpeciesIdentifierView.tsx

@@ -0,0 +1,159 @@
+
+
+import React, { useState, useRef } from 'react';
+import { ScanIcon, SparklesIcon, UploadCloudIcon, CheckCircleIcon, AlertTriangleIcon } from '../components/icons';
+import Spinner from '../components/Spinner';
+import { identifyBonsaiSpecies, isAIConfigured } from '../services/geminiService';
+import type { View, SpeciesIdentificationResult } from '../types';
+import { AppStatus } from '../types';
+
+
+const SpeciesIdentifierView: React.FC<{ setActiveView: (view: View) => void }> = ({ setActiveView }) => {
+    const [status, setStatus] = useState<AppStatus>(AppStatus.IDLE);
+    const [image, setImage] = useState<{ preview: string; base64: string } | null>(null);
+    const [result, setResult] = useState<SpeciesIdentificationResult | null>(null);
+    const [error, setError] = useState<string>('');
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const aiConfigured = isAIConfigured();
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            if (file.size > 4 * 1024 * 1024) { // 4MB limit
+                setError("File size exceeds 4MB. Please upload a smaller image.");
+                return;
+            }
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const base64String = (reader.result as string).split(',')[1];
+                setImage({ preview: reader.result as string, base64: base64String });
+                setError('');
+                setStatus(AppStatus.IDLE);
+                setResult(null);
+            };
+            reader.onerror = () => setError("Failed to read the file.");
+            reader.readAsDataURL(file);
+        }
+    };
+
+    const handleIdentify = async () => {
+        if (!image) {
+            setError("Please upload an image to identify.");
+            return;
+        }
+
+        setStatus(AppStatus.ANALYZING);
+        setError('');
+        setResult(null);
+
+        try {
+            const idResult = await identifyBonsaiSpecies(image.base64);
+            if (idResult && idResult.identifications.length > 0) {
+                setResult(idResult);
+                setStatus(AppStatus.SUCCESS);
+            } else {
+                throw new Error("Could not identify the species. The AI may be busy, or the image may not be clear enough. Please try a different photo.");
+            }
+        } catch (e: any) {
+             setError(e.message);
+            setStatus(AppStatus.ERROR);
+        }
+    };
+    
+    const startFullAnalysis = (species: string) => {
+        // A bit of a hack to pass data to another view; for a larger app, a state manager (Context, Redux) would be better.
+        window.sessionStorage.setItem('prefilled-species', species);
+        setActiveView('steward');
+    }
+
+    const renderContent = () => {
+        switch (status) {
+            case AppStatus.ANALYZING:
+                return <Spinner text="Yuki is examining the leaves..." />;
+            case AppStatus.SUCCESS:
+                if (!result) return null;
+                return (
+                    <div className="space-y-4">
+                        <h3 className="text-xl font-bold text-center text-stone-800">Identification Results</h3>
+                        {result.identifications.map((id, index) => (
+                             <div key={index} className="bg-white p-6 rounded-xl shadow-md border border-stone-200">
+                                <div className="flex justify-between items-baseline mb-2">
+                                     <h4 className="text-lg font-bold text-stone-900">{id.commonName}</h4>
+                                     <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${id.confidence === 'High' ? 'bg-green-100 text-green-800' : id.confidence === 'Medium' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800'}`}>{id.confidence} Confidence</span>
+                                </div>
+                                <p className="text-sm font-mono text-stone-500 mb-3">{id.scientificName}</p>
+                                <p className="text-sm text-stone-700"><strong className="font-medium text-stone-800">Reasoning:</strong> {id.reasoning}</p>
+                                <div className="mt-4 p-4 bg-stone-50 rounded-lg">
+                                    <h5 className="font-semibold text-stone-800">General Care Summary</h5>
+                                    <p className="text-sm text-stone-600 mt-1">{id.generalCareSummary}</p>
+                                </div>
+                                {id.confidence === 'High' && index === 0 && (
+                                    <button
+                                        onClick={() => startFullAnalysis(id.commonName)}
+                                        className="mt-4 w-full flex items-center justify-center gap-2 rounded-md bg-green-700 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-600"
+                                    >
+                                        <SparklesIcon className="w-5 h-5" />
+                                        Get Full Analysis for {id.commonName}
+                                    </button>
+                                )}
+                             </div>
+                        ))}
+                    </div>
+                );
+            case AppStatus.ERROR:
+                 return <p className="text-center text-red-600 p-4 bg-red-50 rounded-md">{error}</p>;
+            case AppStatus.IDLE:
+            default:
+                return (
+                    <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200">
+                        <div onClick={() => fileInputRef.current?.click()} className="flex justify-center rounded-lg border-2 border-dashed border-stone-300 px-6 py-10 hover:border-green-600 transition-colors cursor-pointer">
+                            <div className="text-center">
+                                {image ? <img src={image.preview} alt="Bonsai preview" className="mx-auto h-40 w-auto rounded-md object-cover" /> : (
+                                <>
+                                    <UploadCloudIcon className="mx-auto h-12 w-12 text-stone-400" />
+                                    <p className="mt-2 text-sm font-semibold text-green-700">Upload a photo to identify</p>
+                                    <p className="text-xs text-stone-500">PNG, JPG up to 4MB</p>
+                                </> )}
+                            </div>
+                             <input ref={fileInputRef} type="file" className="sr-only" onChange={handleFileChange} accept="image/png, image/jpeg" />
+                        </div>
+                        {error && <p className="text-sm text-red-600 mt-2">{error}</p>}
+                        <button onClick={handleIdentify} disabled={!image || !aiConfigured} className="w-full mt-6 flex items-center justify-center gap-2 rounded-md bg-green-700 px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-green-600 disabled:bg-stone-400 disabled:cursor-not-allowed">
+                           <CheckCircleIcon className="w-5 h-5"/> Identify Species
+                        </button>
+                         {!aiConfigured && (
+                            <div className="mt-4 p-3 bg-yellow-50 text-yellow-800 rounded-lg border border-yellow-200 text-center">
+                                <p className="text-sm">
+                                AI features are disabled. Please set your Gemini API key in the{' '}
+                                <button onClick={() => setActiveView('settings')} className="font-bold underline hover:text-yellow-900">
+                                    Settings page
+                                </button>.
+                                </p>
+                            </div>
+                        )}
+                    </div>
+                );
+        }
+    }
+
+
+    return (
+        <div className="space-y-8 max-w-2xl mx-auto">
+            <header className="text-center">
+                <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+                    <ScanIcon className="w-8 h-8 text-green-600" />
+                    Species Identifier
+                </h2>
+                <p className="mt-4 text-lg leading-8 text-stone-600">
+                    Don't know what kind of tree you have? Upload a photo and let our AI identify it for you.
+                </p>
+            </header>
+
+            <div>
+                {renderContent()}
+            </div>
+        </div>
+    );
+};
+
+export default SpeciesIdentifierView;

views/SunTrackerView.tsx

@@ -0,0 +1,162 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import SunCalc from 'suncalc';
+import { SunClockIcon, AlertTriangleIcon } from '../components/icons';
+
+type PermissionStatus = 'idle' | 'prompting' | 'granted' | 'denied';
+
+const SunTrackerView: React.FC = () => {
+    const [permission, setPermission] = useState<PermissionStatus>('idle');
+    const [sunData, setSunData] = useState<any>(null);
+    const [compassHeading, setCompassHeading] = useState<number>(0);
+    const [error, setError] = useState<string>('');
+
+    const handleOrientation = (event: DeviceOrientationEvent) => {
+        // webkitCompassHeading is for iOS
+        const heading = (event as any).webkitCompassHeading || (360 - event.alpha!);
+        setCompassHeading(heading);
+    };
+
+    const requestPermissions = useCallback(async () => {
+        setPermission('prompting');
+
+        // Geolocation
+        if (!("geolocation" in navigator)) {
+            setError("Geolocation is not supported by your browser.");
+            setPermission('denied');
+            return;
+        }
+
+        navigator.geolocation.getCurrentPosition(
+            (position) => {
+                const { latitude, longitude } = position.coords;
+                const now = new Date();
+                const times = SunCalc.getTimes(now, latitude, longitude);
+                const pos = SunCalc.getPosition(now, latitude, longitude);
+                setSunData({ ...times, ...pos });
+
+                // Device Orientation (Compass)
+                if (typeof (DeviceOrientationEvent as any).requestPermission === 'function') {
+                    (DeviceOrientationEvent as any).requestPermission()
+                        .then((response: string) => {
+                            if (response === 'granted') {
+                                window.addEventListener('deviceorientation', handleOrientation);
+                                setPermission('granted');
+                            } else {
+                                setError("Compass permission denied.");
+                                setPermission('denied');
+                            }
+                        });
+                } else {
+                     window.addEventListener('deviceorientation', handleOrientation);
+                     setPermission('granted');
+                }
+            },
+            (error) => {
+                setError("Geolocation permission denied. Please enable it in your browser settings.");
+                setPermission('denied');
+            }
+        );
+    }, []);
+
+    useEffect(() => {
+        return () => {
+            window.removeEventListener('deviceorientation', handleOrientation);
+        };
+    }, []);
+
+    const renderCompass = () => (
+        <div className="relative w-48 h-48 mx-auto">
+            <div className="w-full h-full rounded-full bg-stone-100 border-4 border-stone-200 flex items-center justify-center">
+                <div className="absolute top-0 w-px h-full bg-stone-300"></div>
+                <div className="absolute left-0 h-px w-full bg-stone-300"></div>
+                <span className="absolute top-1 text-lg font-bold text-red-600">N</span>
+                <span className="absolute bottom-1 text-lg font-bold text-stone-600">S</span>
+                <span className="absolute left-2 text-lg font-bold text-stone-600">W</span>
+                <span className="absolute right-2 text-lg font-bold text-stone-600">E</span>
+            </div>
+            {sunData && (
+                <div className="absolute inset-0 flex items-center justify-center transform" style={{ transform: `rotate(${-compassHeading}deg)` }}>
+                    <div className="w-8 h-8 bg-yellow-400 rounded-full shadow-lg"
+                        style={{ transform: `rotate(${sunData.azimuth * 180 / Math.PI}deg) translateY(-50px) rotate(${-sunData.azimuth * 180 / Math.PI}deg) `}}
+                        title={`Sun Position: Azimuth ${ (sunData.azimuth * 180 / Math.PI + 180).toFixed(0) }°`}
+                        />
+                </div>
+            )}
+             <div className="absolute inset-0 flex items-center justify-center transform transition-transform duration-500" style={{ transform: `rotate(${compassHeading}deg)` }}>
+                <div className="w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-16 border-b-red-600 transform -translate-y-12"></div>
+            </div>
+        </div>
+    );
+    
+    const renderSunPath = () => {
+        if (!sunData) return null;
+        const now = new Date();
+        const totalDaylight = sunData.sunset.getTime() - sunData.sunrise.getTime();
+        const fromSunrise = now.getTime() - sunData.sunrise.getTime();
+        const percentOfDay = Math.max(0, Math.min(1, fromSunrise / totalDaylight));
+
+        return (
+            <div className="relative h-24 w-full">
+                <svg viewBox="0 0 200 100" className="w-full h-full">
+                    <path d="M 10 90 A 90 90 0 0 1 190 90" stroke="#d6d3d1" strokeWidth="4" fill="none" />
+                    {percentOfDay > 0 && percentOfDay < 1 && (
+                         <circle 
+                            cx={10 + percentOfDay * 180} 
+                            cy={90 - Math.sin(percentOfDay * Math.PI) * 80}
+                            r="8"
+                            fill="#facc15"
+                            stroke="#ca8a04"
+                            strokeWidth="2"
+                        />
+                    )}
+                </svg>
+                <div className="absolute top-full w-full flex justify-between text-xs font-semibold text-stone-600">
+                    <span>{sunData.sunrise.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
+                    <span>{sunData.sunset.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
+                </div>
+            </div>
+        );
+    }
+    
+    return (
+        <div className="space-y-8 max-w-2xl mx-auto">
+            <header className="text-center">
+                <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+                    <SunClockIcon className="w-8 h-8 text-yellow-500" />
+                    Sun Tracker
+                </h2>
+                <p className="mt-4 text-lg leading-8 text-stone-600">
+                    Find the optimal light for your trees. Use this tool to see the sun's path and current position.
+                </p>
+            </header>
+
+            <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200">
+                {permission === 'granted' ? (
+                    <div className="space-y-6">
+                        {renderCompass()}
+                        <div className="text-center">
+                            <p className="text-lg font-bold text-stone-800">Heading: {compassHeading.toFixed(0)}°</p>
+                            <p className="text-sm text-stone-600">Point the top of your device North</p>
+                        </div>
+                        {renderSunPath()}
+                    </div>
+                ) : (
+                    <div className="text-center py-8">
+                        <p className="mb-4 text-stone-700">This tool requires permission to access your device's location and orientation to function.</p>
+                        <button onClick={requestPermissions} disabled={permission === 'prompting'} className="bg-yellow-500 text-white font-bold py-3 px-6 rounded-lg hover:bg-yellow-600 transition-colors disabled:bg-stone-400">
+                            {permission === 'prompting' ? 'Waiting for Permission...' : 'Activate Sun Tracker'}
+                        </button>
+                        {error && (
+                            <div className="mt-6 p-4 bg-red-50 text-red-700 rounded-lg flex items-center gap-3">
+                                <AlertTriangleIcon className="w-6 h-6 flex-shrink-0" />
+                                <p className="text-left">{error}</p>
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default SunTrackerView;

views/ToolGuideView.tsx

@@ -0,0 +1,259 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { WrenchIcon, PlusCircleIcon, ToolboxIcon, InfoIcon, Trash2Icon, SparklesIcon, BookOpenIcon, CheckCircleIcon } from '../components/icons';
+import Spinner from '../components/Spinner';
+import { generateToolGuide, generateMaintenanceTips, isAIConfigured } from '../services/geminiService';
+import type { ToolRecommendation, UserTool, MaintenanceTips } from '../types';
+import { AppStatus, ToolCondition } from '../types';
+import { useLocalStorage } from '../hooks/useLocalStorage';
+
+
+const ToolGuideView: React.FC = () => {
+    const [status, setStatus] = useState<AppStatus>(AppStatus.IDLE);
+    const [toolData, setToolData] = useState<ToolRecommendation[] | null>(null);
+    const [myToolkit, setMyToolkit] = useLocalStorage<UserTool[]>('user-toolkit', []);
+    const [error, setError] = useState<string>('');
+    const [activeTab, setActiveTab] = useState<'encyclopedia' | 'toolkit'>('encyclopedia');
+    
+    const [modalOpen, setModalOpen] = useState(false);
+    const [modalContent, setModalContent] = useState<{toolName: string, tips: MaintenanceTips} | null>(null);
+    const [modalLoading, setModalLoading] = useState(false);
+    const aiConfigured = isAIConfigured();
+
+    useEffect(() => {
+        const fetchToolGuide = async () => {
+            if (!aiConfigured) {
+                setStatus(AppStatus.ERROR);
+                setError('Please set your Gemini API key in Settings to load the tool encyclopedia.');
+                return;
+            }
+            setStatus(AppStatus.ANALYZING);
+            try {
+                const result = await generateToolGuide();
+                if (result) {
+                    setToolData(result);
+                    setStatus(AppStatus.SUCCESS);
+                } else {
+                    throw new Error('Failed to load tool encyclopedia. The AI may be busy. Please try again.');
+                }
+            } catch (e: any) {
+                setError(e.message);
+                setStatus(AppStatus.ERROR);
+            }
+        };
+        fetchToolGuide();
+    }, [aiConfigured]);
+
+    const handleAddToToolkit = (tool: ToolRecommendation) => {
+        const newUserTool: UserTool = {
+            ...tool,
+            id: `${tool.name}-${Date.now()}`,
+            condition: ToolCondition.GOOD,
+        };
+        setMyToolkit(prev => [...prev, newUserTool]);
+    };
+
+    const handleRemoveFromToolkit = (toolId: string) => {
+        setMyToolkit(prev => prev.filter(t => t.id !== toolId));
+    };
+
+    const handleUpdateTool = (toolId: string, updatedProps: Partial<UserTool>) => {
+        setMyToolkit(prev => prev.map(t => t.id === toolId ? { ...t, ...updatedProps } : t));
+    }
+    
+    const handleShowMaintenanceTips = async (tool: UserTool) => {
+        setModalOpen(true);
+        setModalLoading(true);
+        try {
+            const tips = await generateMaintenanceTips(tool.name);
+            if (tips) {
+                setModalContent({ toolName: tool.name, tips });
+            } else {
+                 throw new Error("Could not retrieve tips.");
+            }
+        } catch(e: any) {
+             setModalContent({
+                toolName: tool.name,
+                tips: { sharpening: e.message, cleaning: "Could not retrieve tips.", storage: "Could not retrieve tips."}
+            });
+        } finally {
+            setModalLoading(false);
+        }
+    };
+
+    const isToolInKit = (toolName: string) => myToolkit.some(t => t.name === toolName);
+    
+    const conditionColors: Record<ToolCondition, { bg: string, text: string, ring: string }> = {
+        [ToolCondition.EXCELLENT]: { bg: 'bg-green-100', text: 'text-green-800', ring: 'ring-green-600' },
+        [ToolCondition.GOOD]: { bg: 'bg-blue-100', text: 'text-blue-800', ring: 'ring-blue-600' },
+        [ToolCondition.NEEDS_SHARPENING]: { bg: 'bg-yellow-100', text: 'text-yellow-800', ring: 'ring-yellow-600' },
+        [ToolCondition.NEEDS_OILING]: { bg: 'bg-orange-100', text: 'text-orange-800', ring: 'ring-orange-600' },
+        [ToolCondition.DAMAGED]: { bg: 'bg-red-100', text: 'text-red-800', ring: 'ring-red-600' },
+    };
+
+    const renderEncyclopedia = () => {
+        if (status === AppStatus.ANALYZING) return <Spinner text="Yuki is organizing the tool shed..." />;
+        if (status === AppStatus.ERROR) return <p className="text-center text-red-600 p-4 bg-red-50 rounded-md">{error}</p>;
+        if (!toolData) return null;
+
+        const groupedTools = toolData.reduce((acc, tool) => {
+            acc[tool.category] = acc[tool.category] || [];
+            acc[tool.category].push(tool);
+            return acc;
+        }, {} as Record<ToolRecommendation['category'], ToolRecommendation[]>);
+
+        return (
+            <div className="space-y-6">
+                {Object.entries(groupedTools).map(([category, tools]) => (
+                    <div key={category} className="bg-white rounded-xl shadow-md border border-stone-200 p-6">
+                        <h3 className="text-xl font-semibold text-stone-800 mb-4">{category} Tools</h3>
+                        <div className="divide-y divide-stone-100">
+                        {tools.sort((a,b) => {
+                           const levels = { 'Essential': 1, 'Recommended': 2, 'Advanced': 3 };
+                           return levels[a.level] - levels[b.level];
+                        }).map(tool => (
+                            <div key={tool.name} className="py-3">
+                                <div className="flex justify-between items-start gap-4">
+                                    <div className="flex-1">
+                                        <p className="font-semibold text-stone-800">{tool.name}</p>
+                                        <p className="text-sm text-stone-600">{tool.description}</p>
+                                    </div>
+                                    <div className="flex flex-col items-end gap-2">
+                                        <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${tool.level === 'Essential' ? 'bg-green-100 text-green-800' : tool.level === 'Recommended' ? 'bg-blue-100 text-blue-800' : 'bg-orange-100 text-orange-800'}`}>{tool.level}</span>
+                                        <button
+                                            onClick={() => handleAddToToolkit(tool)}
+                                            disabled={isToolInKit(tool.name)}
+                                            className="flex items-center gap-1 text-xs font-semibold text-green-700 hover:text-green-600 disabled:text-stone-400 disabled:cursor-not-allowed transition-colors"
+                                        >
+                                            {isToolInKit(tool.name) ? <CheckCircleIcon className="w-4 h-4" /> : <PlusCircleIcon className="w-4 h-4" />}
+                                            {isToolInKit(tool.name) ? 'In Toolkit' : 'Add to Toolkit'}
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        );
+    };
+    
+    const renderMyToolkit = () => {
+        if (myToolkit.length === 0) {
+            return (
+                <div className="text-center bg-white rounded-xl shadow-md border border-stone-200 p-12">
+                    <ToolboxIcon className="mx-auto h-16 w-16 text-stone-400" />
+                    <h3 className="mt-4 text-xl font-semibold text-stone-800">Your Toolkit is Empty</h3>
+                    <p className="mt-2 text-stone-600">Add tools from the "Tool Encyclopedia" tab to start managing your collection.</p>
+                </div>
+            )
+        }
+        
+        return (
+             <div className="space-y-4">
+                {myToolkit.map(tool => (
+                    <div key={tool.id} className="bg-white rounded-xl shadow-md border border-stone-200 p-4 transition-shadow hover:shadow-lg">
+                        <div className="flex flex-col sm:flex-row gap-4">
+                            <div className="flex-1">
+                                <p className="font-bold text-lg text-stone-900">{tool.name}</p>
+                                <p className="text-sm text-stone-500">{tool.description}</p>
+                            </div>
+                            <div className="flex flex-col sm:items-end gap-2">
+                                <select 
+                                    value={tool.condition}
+                                    onChange={(e) => handleUpdateTool(tool.id, { condition: e.target.value as ToolCondition })}
+                                    className={`w-full sm:w-auto text-sm font-medium border-0 rounded-md shadow-sm focus:ring-2 focus:ring-offset-2 ${conditionColors[tool.condition].bg} ${conditionColors[tool.condition].text} ${conditionColors[tool.condition].ring}`}
+                                >
+                                    {Object.values(ToolCondition).map(c => <option key={c} value={c}>{c}</option>)}
+                                </select>
+                                <p className="text-xs text-stone-500">
+                                    Last Maintained: {tool.lastMaintained ? new Date(tool.lastMaintained).toLocaleDateString() : 'N/A'}
+                                </p>
+                            </div>
+                        </div>
+                        <div className="mt-4 pt-4 border-t border-stone-100 flex flex-col sm:flex-row items-center gap-4">
+                           <div className="flex-1 w-full">
+                                <label htmlFor={`notes-${tool.id}`} className="text-xs font-bold text-stone-500 uppercase">Notes</label>
+                                <textarea
+                                    id={`notes-${tool.id}`}
+                                    rows={2}
+                                    placeholder="Add notes about this tool..."
+                                    value={tool.notes || ''}
+                                    onChange={(e) => handleUpdateTool(tool.id, { notes: e.target.value })}
+                                    className="block mt-1 w-full rounded-md border-stone-300 shadow-sm focus:border-green-500 focus:ring-green-500 sm:text-sm text-stone-800"
+                                />
+                           </div>
+                           <div className="flex-shrink-0 flex sm:flex-col items-center gap-2 w-full sm:w-auto">
+                                <button onClick={() => handleUpdateTool(tool.id, { lastMaintained: new Date().toISOString() })} className="w-full sm:w-auto flex items-center justify-center gap-2 text-sm font-semibold bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-2 rounded-md transition-colors">Log Maintenance</button>
+                                <button onClick={() => handleShowMaintenanceTips(tool)} disabled={!aiConfigured} className="w-full sm:w-auto flex items-center justify-center gap-2 text-sm font-semibold bg-stone-100 text-stone-700 hover:bg-stone-200 px-3 py-2 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"><InfoIcon className="w-4 h-4"/>Tips</button>
+                                <button onClick={() => handleRemoveFromToolkit(tool.id)} className="w-full sm:w-auto flex items-center justify-center gap-2 text-sm font-semibold bg-red-100 text-red-700 hover:bg-red-200 px-3 py-2 rounded-md transition-colors"><Trash2Icon className="w-4 h-4"/>Remove</button>
+                           </div>
+                        </div>
+                    </div>
+                ))}
+             </div>
+        )
+    };
+    
+    const renderModal = () => (
+        <div className={`fixed inset-0 z-50 flex items-center justify-center transition-opacity ${modalOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
+            <div className="absolute inset-0 bg-black/50" onClick={() => setModalOpen(false)}></div>
+            <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg m-4 p-6 relative transform transition-transform scale-95" style={{transform: modalOpen ? 'scale(1)' : 'scale(0.95)'}}>
+                {modalLoading ? <Spinner text="Yuki is fetching maintenance tips..." /> : (
+                modalContent && <>
+                    <h3 className="text-2xl font-bold text-stone-900">Maintenance for {modalContent.toolName}</h3>
+                    <div className="mt-4 space-y-4 text-stone-600">
+                        <div>
+                            <h4 className="font-semibold text-stone-800">Cleaning</h4>
+                            <p>{modalContent.tips.cleaning}</p>
+                        </div>
+                        <div>
+                            <h4 className="font-semibold text-stone-800">Sharpening</h4>
+                            <p>{modalContent.tips.sharpening}</p>
+                        </div>
+                        <div>
+                            <h4 className="font-semibold text-stone-800">Storage</h4>
+                            <p>{modalContent.tips.storage}</p>
+                        </div>
+                    </div>
+                    <button onClick={() => setModalOpen(false)} className="mt-6 w-full bg-green-700 text-white font-semibold py-2 px-4 rounded-lg hover:bg-green-600 transition-colors">
+                        Close
+                    </button>
+                </>)}
+            </div>
+        </div>
+    );
+
+    return (
+        <div className="space-y-8 max-w-5xl mx-auto">
+            <header className="text-center">
+                <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+                    <WrenchIcon className="w-8 h-8 text-gray-600" />
+                    Bonsai Tool Shed
+                </h2>
+                <p className="mt-4 text-lg leading-8 text-stone-600">
+                    Explore the encyclopedia of bonsai tools and manage your personal toolkit.
+                </p>
+            </header>
+            
+             <div className="bg-white p-2 rounded-xl shadow-lg border border-stone-200">
+                <div className="flex gap-2">
+                    <button onClick={() => setActiveTab('encyclopedia')} className={`flex-1 flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold transition-colors ${activeTab === 'encyclopedia' ? 'bg-green-700 text-white shadow' : 'bg-transparent text-stone-600 hover:bg-stone-100'}`}>
+                        <BookOpenIcon className="w-5 h-5" /> Tool Encyclopedia
+                    </button>
+                    <button onClick={() => setActiveTab('toolkit')} className={`flex-1 flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold transition-colors ${activeTab === 'toolkit' ? 'bg-green-700 text-white shadow' : 'bg-transparent text-stone-600 hover:bg-stone-100'}`}>
+                        <ToolboxIcon className="w-5 h-5" /> My Toolkit ({myToolkit.length})
+                    </button>
+                </div>
+            </div>
+
+            <div>
+                {activeTab === 'encyclopedia' ? renderEncyclopedia() : renderMyToolkit()}
+            </div>
+            
+            {renderModal()}
+        </div>
+    );
+};
+
+export default ToolGuideView;

views/VirtualTrimmerView.tsx

@@ -0,0 +1,170 @@
+
+
+import React, { useState, useRef } from 'react';
+import { ScissorsIcon, SparklesIcon, UploadCloudIcon, DownloadIcon, AlertTriangleIcon } from '../components/icons';
+import Spinner from '../components/Spinner';
+import { AppStatus } from '../types';
+import { editBonsaiWithKontext } from '../services/mcpService';
+import { isAIConfigured } from '../services/geminiService'; // Though this view doesn't use Gemini, we can check for consistency
+import type { View } from '../types';
+
+const VirtualTrimmerView: React.FC<{ setActiveView: (view: View) => void }> = ({ setActiveView }) => {
+    const [status, setStatus] = useState<AppStatus>(AppStatus.IDLE);
+    const [image, setImage] = useState<{ preview: string; base64: string } | null>(null);
+    const [editedImage, setEditedImage] = useState<string | null>(null);
+    const [prompt, setPrompt] = useState<string>('');
+    const [error, setError] = useState<string>('');
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const aiConfigured = isAIConfigured(); // We check this mainly to keep the UI consistent
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            if (file.size > 4 * 1024 * 1024) { // 4MB limit
+                setError("File size exceeds 4MB. Please upload a smaller image.");
+                return;
+            }
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const base64String = (reader.result as string).split(',')[1];
+                setImage({ preview: reader.result as string, base64: base64String });
+                setEditedImage(null);
+                setError('');
+                setStatus(AppStatus.IDLE);
+            };
+            reader.onerror = () => setError("Failed to read the file.");
+            reader.readAsDataURL(file);
+        }
+    };
+
+    const handleGenerate = async () => {
+        if (!image) {
+            setError("Please upload an image first.");
+            return;
+        }
+        if (!prompt.trim()) {
+            setError("Please enter an editing instruction.");
+            return;
+        }
+
+        setStatus(AppStatus.ANALYZING);
+        setError('');
+        setEditedImage(null);
+
+        const result = await editBonsaiWithKontext(image.base64, prompt);
+
+        if (result) {
+            setEditedImage(result);
+            setStatus(AppStatus.SUCCESS);
+        } else {
+            setError('Failed to generate edit. The AI model may be busy or the request could not be completed. Please try again.');
+            setStatus(AppStatus.ERROR);
+        }
+    };
+    
+    const presetPrompts = [
+        "Trim the lowest branch on the left.",
+        "Remove all dead leaves.",
+        "Make the apex more rounded.",
+        "Slightly shorten the longest branch on the right.",
+        "Make the foliage pads more dense and defined.",
+        "Remove the small branch growing towards the viewer.",
+    ];
+
+    return (
+        <div className="space-y-8 max-w-7xl mx-auto">
+            <header className="text-center">
+                <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+                    <ScissorsIcon className="w-8 h-8 text-green-600" />
+                    Virtual Trimmer
+                </h2>
+                <p className="mt-4 text-lg leading-8 text-stone-600 max-w-3xl mx-auto">
+                    Visualize changes to your bonsai before you make a single cut. Describe your edit and let the AI show you the result.
+                </p>
+            </header>
+
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
+                {/* Controls */}
+                <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200 space-y-4 lg:col-span-1">
+                    <div>
+                        <label className="block text-sm font-medium text-stone-900">1. Upload Photo</label>
+                        <div onClick={() => fileInputRef.current?.click()} className="mt-1 flex justify-center p-4 rounded-lg border-2 border-dashed border-stone-300 hover:border-green-600 transition-colors cursor-pointer">
+                           <div className="text-center">
+                               {image ? <p className="text-green-700 font-semibold">Image Loaded!</p> : <UploadCloudIcon className="mx-auto h-10 w-10 text-stone-400" />}
+                                <p className="mt-1 text-sm text-stone-600">{image ? 'Click to change image' : 'Click to upload'}</p>
+                           </div>
+                           <input ref={fileInputRef} type="file" className="sr-only" onChange={handleFileChange} accept="image/png, image/jpeg" />
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <label htmlFor="edit-prompt" className="block text-sm font-medium text-stone-900">2. Describe Your Edit</label>
+                        <textarea
+                            id="edit-prompt"
+                            rows={4}
+                            value={prompt}
+                            onChange={e => setPrompt(e.target.value)}
+                            className="mt-1 block w-full rounded-md border-stone-300 shadow-sm focus:border-green-500 focus:ring-green-500"
+                            placeholder="e.g., 'Trim the top to be more rounded'"
+                        />
+                    </div>
+                    <div className="space-y-2">
+                         <p className="text-sm font-medium text-stone-700">Or try a preset edit:</p>
+                         <div className="flex flex-wrap gap-2">
+                           {presetPrompts.map((p, i) => (
+                               <button key={i} onClick={() => setPrompt(p)} className="text-xs bg-stone-100 text-stone-700 px-3 py-1 rounded-full hover:bg-green-100 hover:text-green-800 transition-colors">
+                                 {p}
+                               </button>
+                           ))}
+                        </div>
+                    </div>
+                    
+                    <button onClick={handleGenerate} disabled={status === AppStatus.ANALYZING || !image || !aiConfigured} className="w-full flex items-center justify-center gap-2 rounded-md bg-green-700 px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-green-600 disabled:bg-stone-400 disabled:cursor-not-allowed">
+                       <SparklesIcon className="w-5 h-5"/> {status === AppStatus.ANALYZING ? 'Generating Edit...' : '3. Generate Edit'}
+                    </button>
+                    {error && <p className="text-sm text-red-600 mt-2 bg-red-50 p-3 rounded-md">{error}</p>}
+                     {!aiConfigured && (
+                        <div className="mt-4 p-3 bg-yellow-50 text-yellow-800 rounded-lg border border-yellow-200 text-center">
+                            <p className="text-sm">
+                            This experimental feature relies on AI. Please set your Gemini API key in the{' '}
+                            <button onClick={() => setActiveView('settings')} className="font-bold underline hover:text-yellow-900">
+                                Settings page
+                            </button>
+                            {' '}to enable it.
+                            </p>
+                        </div>
+                    )}
+                </div>
+
+                {/* Display */}
+                <div className="bg-white p-4 rounded-xl shadow-lg border border-stone-200 lg:col-span-2">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div className="text-center">
+                            <h3 className="text-lg font-bold text-stone-800 mb-2">Original</h3>
+                             <div className="aspect-square bg-stone-100 rounded-lg flex items-center justify-center">
+                                {image ? <img src={image.preview} alt="Original bonsai" className="max-h-full max-w-full object-contain rounded-lg"/> : <p className="text-stone-500">Upload an image to start</p>}
+                            </div>
+                        </div>
+                         <div className="text-center">
+                             <h3 className="text-lg font-bold text-stone-800 mb-2">Edited</h3>
+                             <div className="aspect-square bg-stone-100 rounded-lg flex items-center justify-center relative">
+                                {status === AppStatus.ANALYZING && <Spinner text="AI is trimming..." />}
+                                {status === AppStatus.SUCCESS && editedImage && (
+                                    <>
+                                        <img src={`data:image/jpeg;base64,${editedImage}`} alt="Edited bonsai" className="max-h-full max-w-full object-contain rounded-lg"/>
+                                        <a href={`data:image/jpeg;base64,${editedImage}`} download="edited-bonsai.jpg" className="absolute top-2 right-2 p-2 bg-white/70 rounded-full hover:bg-white transition-colors">
+                                            <DownloadIcon className="w-5 h-5 text-stone-700"/>
+                                        </a>
+                                    </>
+                                )}
+                                {status !== AppStatus.ANALYZING && !editedImage && <p className="text-stone-500">Your edited image will appear here</p>}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default VirtualTrimmerView;

views/WeatherShieldView.tsx

@@ -0,0 +1,161 @@
+
+import React, { useState, useEffect } from 'react';
+import { UmbrellaIcon, SnowflakeIcon, SunIcon, WindIcon, AlertTriangleIcon } from '../components/icons';
+import { useLocalStorage } from '../hooks/useLocalStorage';
+import type { BonsaiTree } from '../types';
+import Spinner from '../components/Spinner';
+
+interface WeatherData {
+    daily: {
+        time: string[];
+        weathercode: number[];
+        temperature_2m_max: number[];
+        temperature_2m_min: number[];
+        windspeed_10m_max: number[];
+    };
+}
+
+const WeatherShieldView: React.FC = () => {
+    const [trees] = useLocalStorage<BonsaiTree[]>('bonsai-diary-trees', []);
+    const [weather, setWeather] = useState<WeatherData | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string>('');
+
+    useEffect(() => {
+        const fetchWeather = async () => {
+            if (trees.length === 0) {
+                setIsLoading(false);
+                return;
+            }
+            
+            // For simplicity, use the location of the first tree as the primary location
+            const primaryLocation = trees[0].location;
+            if (!primaryLocation) {
+                setError("No location set for your trees. Please add a location in 'My Garden'.");
+                setIsLoading(false);
+                return;
+            }
+
+            try {
+                // Simple geocoding using a public API
+                const geoResponse = await fetch(`https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(primaryLocation)}&count=1`);
+                const geoData = await geoResponse.json();
+
+                if (!geoData.results || geoData.results.length === 0) {
+                    throw new Error(`Could not find location: ${primaryLocation}`);
+                }
+                const { latitude, longitude } = geoData.results[0];
+                
+                // Fetch weather forecast
+                const weatherResponse = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&daily=weathercode,temperature_2m_max,temperature_2m_min,windspeed_10m_max&timezone=auto`);
+                const weatherData = await weatherResponse.json();
+                setWeather(weatherData);
+
+            } catch (err) {
+                 if (err instanceof Error) {
+                    setError(`Failed to fetch weather data: ${err.message}`);
+                } else {
+                    setError("An unknown error occurred while fetching weather data.");
+                }
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchWeather();
+    }, [trees]);
+    
+    const getWeatherIcon = (code: number) => {
+        if (code >= 200 && code < 600) return <UmbrellaIcon className="w-8 h-8 text-blue-500" />; // Rain
+        if (code >= 600 && code < 700) return <SnowflakeIcon className="w-8 h-8 text-cyan-400" />; // Snow
+        if (code === 800) return <SunIcon className="w-8 h-8 text-yellow-500" />; // Clear
+        return <SunIcon className="w-8 h-8 text-stone-500" />; // Default/Clouds
+    };
+
+    const generateAlertsForTree = (tree: BonsaiTree) => {
+        if (!weather || !tree.protectionProfile || !tree.protectionProfile.alertsEnabled) return [];
+        
+        const alerts: string[] = [];
+        weather.daily.time.slice(0, 5).forEach((_, i) => {
+            const dayMinTemp = weather.daily.temperature_2m_min[i];
+            const dayMaxTemp = weather.daily.temperature_2m_max[i];
+            const dayMaxWind = weather.daily.windspeed_10m_max[i];
+
+            if (dayMinTemp < tree.protectionProfile!.minTempC) {
+                alerts.push(`Frost Alert for ${new Date(weather.daily.time[i]).toLocaleDateString([], {weekday: 'short'})}: Low of ${dayMinTemp.toFixed(0)}°C`);
+            }
+            if (dayMaxTemp > tree.protectionProfile!.maxTempC) {
+                alerts.push(`Heat Alert for ${new Date(weather.daily.time[i]).toLocaleDateString([], {weekday: 'short'})}: High of ${dayMaxTemp.toFixed(0)}°C`);
+            }
+            if (dayMaxWind > tree.protectionProfile!.maxWindKph) {
+                alerts.push(`Wind Alert for ${new Date(weather.daily.time[i]).toLocaleDateString([], {weekday: 'short'})}: Gusts up to ${dayMaxWind.toFixed(0)} km/h`);
+            }
+        });
+        return alerts;
+    }
+
+
+    return (
+        <div className="space-y-8 max-w-6xl mx-auto">
+            <header className="text-center">
+                <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+                    <UmbrellaIcon className="w-8 h-8 text-blue-600" />
+                    Weather Shield
+                </h2>
+                <p className="mt-4 text-lg leading-8 text-stone-600">
+                    Proactive weather alerts for your bonsai collection, based on their individual needs.
+                </p>
+            </header>
+
+            {isLoading ? <Spinner text="Fetching local forecast..."/> : 
+             error ? <p className="text-center text-red-600 p-4 bg-red-50 rounded-md">{error}</p> :
+             !weather ? <p className="text-center text-stone-600">Add trees to your garden to see weather alerts.</p> :
+            (
+                <>
+                <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200">
+                    <h3 className="text-xl font-bold text-stone-800 mb-4">5-Day Forecast for {trees[0]?.location || 'Your Area'}</h3>
+                    <div className="grid grid-cols-2 md:grid-cols-5 gap-4 text-center">
+                        {weather.daily.time.slice(0, 5).map((time, i) => (
+                             <div key={time} className="bg-stone-50 p-4 rounded-lg border border-stone-100">
+                                <p className="font-bold text-stone-900">{new Date(time).toLocaleDateString([], { weekday: 'short', day: 'numeric'})}</p>
+                                <div className="my-2">{getWeatherIcon(weather.daily.weathercode[i])}</div>
+                                <p className="font-semibold text-blue-600">{weather.daily.temperature_2m_min[i].toFixed(0)}°C</p>
+                                <p className="font-semibold text-red-600">{weather.daily.temperature_2m_max[i].toFixed(0)}°C</p>
+                                <p className="text-sm text-stone-500 mt-1 flex items-center justify-center gap-1"><WindIcon className="w-4 h-4" />{weather.daily.windspeed_10m_max[i].toFixed(0)} km/h</p>
+                             </div>
+                        ))}
+                    </div>
+                </div>
+
+                <div className="space-y-4">
+                    <h3 className="text-xl font-bold text-stone-800">Tree Protection Status</h3>
+                    {trees.map(tree => {
+                        const alerts = generateAlertsForTree(tree);
+                        const hasAlerts = alerts.length > 0;
+                        return (
+                             <div key={tree.id} className={`bg-white p-4 rounded-lg shadow-md border-l-4 ${hasAlerts ? 'border-red-500' : 'border-green-500'}`}>
+                                <h4 className="font-bold text-lg text-stone-900">{tree.name} <span className="text-sm font-normal text-stone-500">({tree.species})</span></h4>
+                                {hasAlerts ? (
+                                    <div className="mt-2 space-y-1">
+                                        {alerts.map((alert, i) => (
+                                            <div key={i} className="flex items-center gap-2 text-sm text-red-700 font-semibold">
+                                                <AlertTriangleIcon className="w-4 h-4 flex-shrink-0" />
+                                                <p>{alert}</p>
+                                            </div>
+                                        ))}
+                                    </div>
+                                ) : (
+                                    <p className="mt-1 text-sm text-green-700 font-medium">No weather threats detected in the next 5 days.</p>
+                                )}
+                             </div>
+                        );
+                    })}
+                </div>
+                </>
+            )
+            }
+        </div>
+    );
+};
+
+export default WeatherShieldView;

views/WiringGuideView.tsx

@@ -0,0 +1,237 @@
+
+
+
+import React, { useState, useRef, useLayoutEffect } from 'react';
+import { SnailIcon, SparklesIcon, UploadCloudIcon, AlertTriangleIcon } from '../components/icons';
+import Spinner from '../components/Spinner';
+import { generateStylingBlueprint, isAIConfigured } from '../services/geminiService';
+import { AppStatus, AnnotationType } from '../types';
+import type { StylingBlueprint, StylingAnnotation, SvgPoint, View } from '../types';
+
+const ANNOTATION_STYLES: { [key in AnnotationType]: React.CSSProperties } = {
+    [AnnotationType.PruneLine]: { stroke: '#ef4444', strokeWidth: 3, strokeDasharray: '6 4', fill: 'none' },
+    [AnnotationType.RemoveBranch]: { stroke: '#ef4444', strokeWidth: 2, fill: 'rgba(239, 68, 68, 0.3)' },
+    [AnnotationType.WireDirection]: { stroke: '#3b82f6', strokeWidth: 3, fill: 'none', markerEnd: 'url(#arrow-head-blue)' },
+    [AnnotationType.FoliageRefinement]: { stroke: '#22c55e', strokeWidth: 3, strokeDasharray: '8 5', fill: 'rgba(34, 197, 94, 0.2)' },
+    [AnnotationType.JinShari]: { stroke: '#a16207', strokeWidth: 2, fill: 'rgba(161, 98, 7, 0.25)', strokeDasharray: '3 3' },
+    [AnnotationType.TrunkLine]: { stroke: '#f97316', strokeWidth: 4, fill: 'none', opacity: 0.8, markerEnd: 'url(#arrow-head-orange)' },
+    [AnnotationType.ExposeRoot]: { stroke: '#9333ea', strokeWidth: 2, fill: 'rgba(147, 51, 234, 0.2)', strokeDasharray: '5 5' },
+};
+
+const SvgAnnotation: React.FC<{ annotation: StylingAnnotation, scale: { x: number, y: number } }> = ({ annotation, scale }) => {
+    const style = ANNOTATION_STYLES[annotation.type];
+    const { type, points, path, label } = annotation;
+
+    const transformPoints = (pts: SvgPoint[]): string => {
+        return pts.map(p => `${p.x * scale.x},${p.y * scale.y}`).join(' ');
+    };
+
+    const scalePath = (pathData: string): string => {
+        return pathData.replace(/([0-9.]+)/g, (match, number, offset) => {
+            const precedingChar = pathData[offset - 1];
+            const isY = precedingChar === ',' || (precedingChar === ' ' && pathData.substring(0, offset).split(' ').length % 2 === 0);
+            return isY ? (parseFloat(number) * scale.y).toFixed(2) : (parseFloat(number) * scale.x).toFixed(2);
+        });
+    };
+
+    const positionLabel = (): SvgPoint => {
+        if (points && points.length > 0) {
+            const total = points.reduce((acc, p) => ({ x: acc.x + p.x, y: acc.y + p.y }), { x: 0, y: 0 });
+            return { x: (total.x / points.length) * scale.x, y: (total.y / points.length) * scale.y };
+        }
+        if (path) {
+            const commands = path.split(' ');
+            const lastX = parseFloat(commands[commands.length - 2]);
+            const lastY = parseFloat(commands[commands.length - 1]);
+            return { x: lastX * scale.x, y: lastY * scale.y };
+        }
+        return { x: 0, y: 0 };
+    };
+    
+    const labelPos = positionLabel();
+
+    const renderShape = () => {
+        switch (type) {
+            case AnnotationType.PruneLine:
+                return <polyline points={transformPoints(points || [])} style={style} />;
+            case AnnotationType.FoliageRefinement:
+            case AnnotationType.RemoveBranch:
+            case AnnotationType.JinShari:
+            case AnnotationType.ExposeRoot:
+                return <polygon points={transformPoints(points || [])} style={style} />;
+            case AnnotationType.WireDirection:
+            case AnnotationType.TrunkLine:
+                return <path d={scalePath(path || '')} style={style} />;
+            default:
+                return null;
+        }
+    };
+    
+    return (
+        <g className="annotation-group transition-opacity hover:opacity-100 opacity-80">
+            {renderShape()}
+            <text x={labelPos.x + 5} y={labelPos.y - 5} fill="white" stroke="black" strokeWidth="0.5px" paintOrder="stroke" fontSize="14" fontWeight="bold" className="pointer-events-none">
+                {label}
+            </text>
+        </g>
+    );
+};
+
+
+const WiringGuideView: React.FC<{ setActiveView: (view: View) => void }> = ({ setActiveView }) => {
+    const [status, setStatus] = useState<AppStatus>(AppStatus.IDLE);
+    const [image, setImage] = useState<{ preview: string; base64: string } | null>(null);
+    const [blueprint, setBlueprint] = useState<StylingBlueprint | null>(null);
+    const [error, setError] = useState<string>('');
+    const [viewBox, setViewBox] = useState({ width: 0, height: 0 });
+    const [scale, setScale] = useState({ x: 1, y: 1 });
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const imageContainerRef = useRef<HTMLDivElement>(null);
+    const aiConfigured = isAIConfigured();
+
+    useLayoutEffect(() => {
+        if (image && blueprint && imageContainerRef.current) {
+            const { clientWidth, clientHeight } = imageContainerRef.current;
+            setViewBox({ width: clientWidth, height: clientHeight });
+            setScale({
+                x: clientWidth / blueprint.canvas.width,
+                y: clientHeight / blueprint.canvas.height
+            });
+        }
+    }, [image, blueprint]);
+    
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            if (file.size > 4 * 1024 * 1024) {
+                setError("File size exceeds 4MB. Please upload a smaller image.");
+                return;
+            }
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const base64String = (reader.result as string).split(',')[1];
+                setImage({ preview: reader.result as string, base64: base64String });
+                setError('');
+                setBlueprint(null);
+                setStatus(AppStatus.IDLE);
+            };
+            reader.onerror = () => setError("Failed to read the file.");
+            reader.readAsDataURL(file);
+        }
+    };
+    
+    const handleGenerate = async () => {
+        if (!image) {
+            setError("Please upload an image first.");
+            return;
+        }
+
+        setStatus(AppStatus.ANALYZING);
+        setError('');
+        setBlueprint(null);
+        
+        try {
+            const wiringPrompt = `Generate a styling blueprint focusing only on wiring. Show the ideal placement and direction for applying wire to shape the primary and secondary branches. Use the WIRE_DIRECTION annotation type. Provide a concise summary.`;
+            const result = await generateStylingBlueprint(image.base64, wiringPrompt);
+            if (result) {
+                setBlueprint(result);
+                setStatus(AppStatus.SUCCESS);
+            } else {
+                throw new Error('Failed to generate wiring guide. The AI may be busy or the image unclear. Please try again.');
+            }
+        } catch (e: any) {
+            setError(e.message);
+            setStatus(AppStatus.ERROR);
+        }
+    };
+
+    return (
+        <div className="space-y-8 max-w-7xl mx-auto">
+            <header className="text-center">
+                <h2 className="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl flex items-center justify-center gap-3">
+                    <SnailIcon className="w-8 h-8 text-blue-600" />
+                    AI Wiring Guide
+                </h2>
+                <p className="mt-4 text-lg leading-8 text-stone-600">
+                    Visualize the perfect wiring paths for your bonsai before you touch a single wire.
+                </p>
+            </header>
+            
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
+                {/* Left Column: Controls */}
+                <div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200 space-y-4 lg:col-span-1">
+                     <div>
+                        <label className="block text-sm font-medium text-stone-900">1. Upload Photo</label>
+                        <div onClick={() => fileInputRef.current?.click()} className="mt-1 flex justify-center p-4 rounded-lg border-2 border-dashed border-stone-300 hover:border-blue-600 transition-colors cursor-pointer">
+                           <div className="text-center">
+                               {image ? <p className="text-green-700 font-semibold">Image Loaded!</p> : <UploadCloudIcon className="mx-auto h-10 w-10 text-stone-400" />}
+                                <p className="mt-1 text-sm text-stone-600">{image ? 'Click to change image' : 'Click to upload'}</p>
+                           </div>
+                           <input ref={fileInputRef} type="file" className="sr-only" onChange={handleFileChange} accept="image/png, image/jpeg" />
+                        </div>
+                    </div>
+                    
+                     <button onClick={handleGenerate} disabled={status === AppStatus.ANALYZING || !image || !aiConfigured} className="w-full flex items-center justify-center gap-2 rounded-md bg-blue-600 px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 disabled:bg-stone-400 disabled:cursor-not-allowed">
+                       <SparklesIcon className="w-5 h-5"/> {status === AppStatus.ANALYZING ? 'Generating Guide...' : '2. Generate Wiring Guide'}
+                    </button>
+                    {error && <p className="text-sm text-red-600 mt-2 bg-red-50 p-3 rounded-md">{error}</p>}
+                    {!aiConfigured && (
+                        <div className="mt-4 p-3 bg-yellow-50 text-yellow-800 rounded-lg border border-yellow-200 text-center">
+                            <p className="text-sm">
+                            Please set your Gemini API key in the{' '}
+                            <button onClick={() => setActiveView('settings')} className="font-bold underline hover:text-yellow-900">
+                                Settings page
+                            </button>
+                            {' '}to enable this feature.
+                            </p>
+                        </div>
+                    )}
+                </div>
+
+                {/* Right Column: Canvas */}
+                <div className="bg-white p-4 rounded-xl shadow-lg border border-stone-200 lg:col-span-2">
+                    <div ref={imageContainerRef} className="relative w-full aspect-w-4 aspect-h-3 bg-stone-100 rounded-lg">
+                        {image ? (
+                            <>
+                                <img src={image.preview} alt="Bonsai" className="w-full h-full object-contain rounded-lg" />
+                                {blueprint && (
+                                    <svg
+                                        className="absolute top-0 left-0 w-full h-full"
+                                        viewBox={`0 0 ${viewBox.width} ${viewBox.height}`}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                        <defs>
+                                            <marker id="arrow-head-blue" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+                                                <path d="M 0 0 L 10 5 L 0 10 z" fill="#3b82f6" />
+                                            </marker>
+                                            <marker id="arrow-head-orange" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+                                                <path d="M 0 0 L 10 5 L 0 10 z" fill="#f97316" />
+                                            </marker>
+                                        </defs>
+                                        {blueprint.annotations.map((anno, i) => (
+                                            <SvgAnnotation key={i} annotation={anno} scale={scale} />
+                                        ))}
+                                    </svg>
+                                )}
+                            </>
+                        ) : (
+                            <div className="flex items-center justify-center h-full">
+                                <p className="text-stone-500">Your image and guide will appear here</p>
+                            </div>
+                        )}
+                        {status === AppStatus.ANALYZING && <div className="absolute inset-0 flex items-center justify-center bg-white/75"><Spinner text="Yuki is planning the wires..." /></div>}
+                    </div>
+                     {blueprint && status === AppStatus.SUCCESS && (
+                         <div className="mt-4 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-r-lg">
+                            <h4 className="font-bold text-blue-800">Yuki's Summary</h4>
+                            <p className="text-sm text-blue-700 mt-1">{blueprint.summary}</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default WiringGuideView;

vite.config.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});