ltcai 4.7.0 → 5.0.0

package/frontend/src/components/ProductFlow.tsx

@@ -6,6 +6,8 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { cn, asArray } from "@/lib/utils";
+import { LANGUAGE_LABELS, t, type Language } from "@/i18n";
+import { useAppStore } from "@/store/appStore";
 
 const FLOW_COMPLETE_KEY = "lattice.productFlow.complete";
 const FLOW_USER_KEY = "lattice.productFlow.user";
@@ -43,7 +45,16 @@ export function readProductFlowComplete() {
   return false;
 }
 
+function readSavedFlowUser(): { email?: string; name?: string } | null {
+  try {
+    const raw = localStorage.getItem(FLOW_USER_KEY);
+    return raw ? JSON.parse(raw) : null;
+  } catch {}
+  return null;
+}
+
 export function ProductFlow({ onComplete }: { onComplete: () => void }) {
+  const language = useAppStore((state) => state.language);
   const [step, setStep] = React.useState<FlowStep>("login");
   const [analysis, setAnalysis] = React.useState<FlowAnalysis | null>(null);
   const [analysisError, setAnalysisError] = React.useState<string | null>(null);
@@ -70,16 +81,17 @@ export function ProductFlow({ onComplete }: { onComplete: () => void }) {
         sysinfo: sysinfo.ok ? sysinfo.data as ApiData : null,
       });
       if (!setup.ok && !recommendationsResult.ok && !models.ok) {
-        setAnalysisError("Lattice could not finish reading this computer. You can still continue with a safe default.");
+        setAnalysisError(t(language, "flow.analysis.error"));
       }
     }
     void runAnalysis();
     return () => { cancelled = true; };
-  }, [analysis, step]);
+  }, [analysis, language, step]);
 
   return (
-    <div className="ritual-shell" aria-label="Awaken your Brain">
+    <div className="ritual-shell" aria-label={t(language, "flow.shell")}>
       <div className="ritual-container">
+        <LanguageChooser />
         {/* The living presence participates in the ritual at every step */}
         <div className="ritual-brain">
           <LivingBrain
@@ -133,80 +145,116 @@ export function ProductFlow({ onComplete }: { onComplete: () => void }) {
   );
 }
 
+function LanguageChooser() {
+  const language = useAppStore((state) => state.language);
+  const setLanguage = useAppStore((state) => state.setLanguage);
+
+  return (
+    <div className="language-switcher ritual-language" aria-label={t(language, "language.label")}>
+      {(["ko", "en"] as Language[]).map((item) => (
+        <button
+          key={item}
+          type="button"
+          className={language === item ? "is-active" : ""}
+          onClick={() => setLanguage(item)}
+          aria-pressed={language === item}
+        >
+          {LANGUAGE_LABELS[item]}
+        </button>
+      ))}
+    </div>
+  );
+}
+
 function LoginScreen({ onSuccess }: { onSuccess: () => void }) {
+  const language = useAppStore((state) => state.language);
   const [email, setEmail] = React.useState(() => {
-    try {
-      const saved = localStorage.getItem(FLOW_USER_KEY);
-      return saved ? JSON.parse(saved).email || "you@local" : "you@local";
-    } catch {
-      return "you@local";
-    }
+    return readSavedFlowUser()?.email || "you@local";
   });
   const [password, setPassword] = React.useState("");
-  const [name, setName] = React.useState("You");
+  const [name, setName] = React.useState(() => readSavedFlowUser()?.name || "You");
   const [busy, setBusy] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
 
   async function submit(event: React.FormEvent) {
     event.preventDefault();
+    const cleanEmail = email.trim();
+    const cleanPassword = password.trim();
+    const cleanName = name.trim() || cleanEmail.split("@")[0] || "You";
+    if (!cleanEmail || !cleanPassword) {
+      setError(t(language, "flow.login.missing"));
+      return;
+    }
     setBusy(true);
     setError(null);
-    const safePassword = password || "Lattice123";
-    let result = await latticeApi.login(email, safePassword);
-    if (!result.ok) {
-      const registered = await latticeApi.register({
-        email,
-        password: safePassword,
-        name: name || email.split("@")[0] || "You",
-        nickname: name || "You",
-      });
-      if (registered.ok) result = await latticeApi.login(email, safePassword);
-    }
+    const savedUser = readSavedFlowUser();
+    let result = await latticeApi.login(cleanEmail, cleanPassword);
     if (!result.ok) {
       const profile = await latticeApi.profile();
-      if (!profile.ok) {
+      if (profile.ok && (!savedUser?.email || savedUser.email === cleanEmail)) {
+        try { localStorage.setItem(FLOW_USER_KEY, JSON.stringify({ email: cleanEmail, name: cleanName })); } catch {}
+        setBusy(false);
+        onSuccess();
+        return;
+      }
+      if (savedUser?.email && savedUser.email !== cleanEmail) {
         setBusy(false);
-        setError("We could not open your local profile. Check your password or create the first local account.");
+        setError(t(language, "flow.login.otherEmail"));
         return;
       }
+      if (savedUser?.email === cleanEmail) {
+        setBusy(false);
+        setError(t(language, "flow.login.wrongPassword"));
+        return;
+      }
+      const registered = await latticeApi.register({
+        email: cleanEmail,
+        password: cleanPassword,
+        name: cleanName,
+        nickname: cleanName,
+      });
+      if (registered.ok) result = await latticeApi.login(cleanEmail, cleanPassword);
+    }
+    if (!result.ok) {
+      setBusy(false);
+      setError(t(language, "flow.login.unavailable"));
+      return;
     }
-    try { localStorage.setItem(FLOW_USER_KEY, JSON.stringify({ email, name })); } catch {}
+    try { localStorage.setItem(FLOW_USER_KEY, JSON.stringify({ email: cleanEmail, name: cleanName })); } catch {}
     setBusy(false);
     onSuccess();
   }
 
   return (
     <div>
-      <div className="ritual-title">Welcome to your mind.</div>
-      <div className="ritual-subtitle">
-        Models will change. Your knowledge should not. Lattice keeps your documents, conversations, decisions, and context together as a private Brain you own.
-      </div>
+      <div className="ritual-title">{t(language, "flow.login.title")}</div>
+      <div className="ritual-subtitle">{t(language, "flow.login.body")}</div>
 
       <ProductPromise />
 
       <form onSubmit={submit} className="ritual-card" style={{ maxWidth: 420, margin: "0 auto" }}>
         <div style={{ display: "grid", gap: "0.85rem" }}>
           <div>
-            <div style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "1px", color: "hsl(var(--fg-muted))", marginBottom: 4 }}>Your name</div>
+            <div style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "1px", color: "hsl(var(--fg-muted))", marginBottom: 4 }}>{t(language, "flow.name")}</div>
             <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="You" />
           </div>
           <div>
-            <div style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "1px", color: "hsl(var(--fg-muted))", marginBottom: 4 }}>Email (local only)</div>
+            <div style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "1px", color: "hsl(var(--fg-muted))", marginBottom: 4 }}>{t(language, "flow.email")}</div>
             <Input value={email} onChange={(e) => setEmail(e.target.value)} type="email" placeholder="you@local" />
           </div>
           <div>
-            <div style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "1px", color: "hsl(var(--fg-muted))", marginBottom: 4 }}>Password</div>
-            <Input value={password} onChange={(e) => setPassword(e.target.value)} type="password" placeholder="Create a strong local password" />
+            <div style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "1px", color: "hsl(var(--fg-muted))", marginBottom: 4 }}>{t(language, "flow.password")}</div>
+            <Input value={password} onChange={(e) => setPassword(e.target.value)} type="password" placeholder={t(language, "flow.password.placeholder")} />
           </div>
         </div>
 
         {error && <div style={{ marginTop: "0.85rem", padding: "0.6rem 0.85rem", background: "hsl(var(--destructive)/0.12)", border: "1px solid hsl(var(--destructive)/0.4)", borderRadius: 10, fontSize: "0.9rem" }}>{error}</div>}
 
-        <Button type="submit" disabled={busy || !email.trim()} style={{ width: "100%", marginTop: "1rem" }}>
-          {busy ? "Opening the Brain..." : "Open my Brain"} 
+        <Button type="submit" disabled={busy || !email.trim() || !password.trim()} style={{ width: "100%", marginTop: "1rem" }}>
+          {busy ? t(language, "flow.login.busy") : t(language, "flow.login.submit")}
         </Button>
         <div style={{ fontSize: "0.75rem", color: "hsl(var(--fg-muted))", marginTop: "0.6rem" }}>
-          Local profile first. Model choice comes later.
+          {t(language, "flow.login.note")}
         </div>
       </form>
     </div>
@@ -214,19 +262,20 @@ function LoginScreen({ onSuccess }: { onSuccess: () => void }) {
 }
 
 function ProductPromise() {
+  const language = useAppStore((state) => state.language);
   return (
     <div className="ritual-promise" aria-label="Lattice AI product promise">
       <div>
-        <span>Durable knowledge</span>
-        <strong>Your work becomes long-lived context.</strong>
+        <span>{t(language, "flow.promise.memory.k")}</span>
+        <strong>{t(language, "flow.promise.memory.v")}</strong>
       </div>
       <div>
-        <span>Replaceable models</span>
-        <strong>The model is a voice, not the asset.</strong>
+        <span>{t(language, "flow.promise.model.k")}</span>
+        <strong>{t(language, "flow.promise.model.v")}</strong>
       </div>
       <div>
-        <span>User ownership</span>
-        <strong>Back up, restore, and move your Brain.</strong>
+        <span>{t(language, "flow.promise.ownership.k")}</span>
+        <strong>{t(language, "flow.promise.ownership.v")}</strong>
       </div>
     </div>
   );
@@ -241,13 +290,12 @@ function AnalysisScreen({
   error: string | null;
   onContinue: () => void;
 }) {
+  const language = useAppStore((state) => state.language);
   const detected = buildDetectedFacts(analysis);
   return (
     <div>
-      <div className="ritual-title">Understanding your home.</div>
-      <div className="ritual-subtitle">
-        Lattice is checking what this computer can support so your Brain can run locally instead of turning your memories into a cloud dependency.
-      </div>
+      <div className="ritual-title">{t(language, "flow.analysis.title")}</div>
+      <div className="ritual-subtitle">{t(language, "flow.analysis.body")}</div>
 
       <div className="ritual-fact-grid">
         {detected.map((item, idx) => (
@@ -263,9 +311,9 @@ function AnalysisScreen({
         <div style={{ display: "flex", alignItems: "center", gap: "0.6rem" }}>
           <Sparkles style={{ color: "hsl(var(--brain-core))" }} />
           <div>
-            <div style={{ fontWeight: 620 }}>{analysis ? recommendedSummary(analysis) : "Preparing the best fit..."}</div>
+            <div style={{ fontWeight: 620 }}>{analysis ? recommendedSummary(analysis, language) : t(language, "flow.analysis.finding")}</div>
             <div style={{ fontSize: "0.9rem", color: "hsl(var(--fg-muted))" }}>
-              {analysis ? "A short, personal list of minds is ready for you to choose from." : "Reading your machine. This is gentle."}
+              {analysis ? t(language, "flow.analysis.ready") : t(language, "flow.analysis.wait")}
             </div>
           </div>
         </div>
@@ -275,7 +323,7 @@ function AnalysisScreen({
 
       <div style={{ marginTop: "1.25rem" }}>
         <Button onClick={onContinue} disabled={!analysis && !error} style={{ minWidth: 260 }}>
-          See how your Brain can think
+          {t(language, "flow.analysis.continue")}
         </Button>
       </div>
     </div>
@@ -291,15 +339,19 @@ function RecommendationScreen({
   onBack: () => void;
   onSelect: (model: RecommendedModel) => void;
 }) {
+  const language = useAppStore((state) => state.language);
   const items = recommendations.length ? recommendations : [fallbackModel()];
   return (
     <div>
-      <div className="ritual-title">How shall your mind think today?</div>
-      <div className="ritual-subtitle">
-        The model is the current voice of your Brain. You can replace it later; your knowledge stays.
-      </div>
+      <div className="ritual-title">{t(language, "flow.recommend.title")}</div>
+      <div className="ritual-subtitle">{t(language, "flow.recommend.body")}</div>
 
       <div style={{ maxWidth: 560, margin: "0 auto" }}>
+        {items[0]?.supported ? (
+          <Button onClick={() => onSelect(items[0])} style={{ width: "100%", marginBottom: "0.85rem" }}>
+            {t(language, "flow.recommend.primary")}
+          </Button>
+        ) : null}
         {items.slice(0, 3).map((model, index) => (
           <button
             key={`${model.role}-${model.id}`}
@@ -308,17 +360,17 @@ function RecommendationScreen({
             disabled={!model.supported}
             style={{ width: "100%" }}
           >
-            <div className="role">{rankLabel(model.role, index)}</div>
+            <div className="role">{rankLabel(model.role, index, language)}</div>
             <div className="name">{model.shortName}</div>
             <div className="reason">{model.reason} · {model.size || "ready"}</div>
-            {!model.supported && <div style={{ color: "hsl(var(--destructive))", marginTop: 6, fontSize: "0.85rem" }}>Needs attention on this machine</div>}
+            {!model.supported && <div style={{ color: "hsl(var(--destructive))", marginTop: 6, fontSize: "0.85rem" }}>{t(language, "flow.recommend.unsupported")}</div>}
           </button>
         ))}
       </div>
 
       <div style={{ marginTop: "1.1rem", display: "flex", justifyContent: "center", gap: "1rem", alignItems: "center" }}>
-        <Button variant="ghost" onClick={onBack}>Back</Button>
-        <div style={{ fontSize: "0.82rem", color: "hsl(var(--fg-muted))" }}>Your choice becomes the current voice of your Brain.</div>
+        <Button variant="ghost" onClick={onBack}>{t(language, "flow.recommend.back")}</Button>
+        <div style={{ fontSize: "0.82rem", color: "hsl(var(--fg-muted))" }}>{t(language, "flow.recommend.hint")}</div>
       </div>
     </div>
   );
@@ -333,10 +385,11 @@ function InstallScreen({
   onBack: () => void;
   onComplete: () => void;
 }) {
+  const language = useAppStore((state) => state.language);
   const [busy, setBusy] = React.useState(false);
   const [stage, setStage] = React.useState<InstallStage>("idle");
   const [percent, setPercent] = React.useState(0);
-  const [message, setMessage] = React.useState("Your Brain is waiting for this mind.");
+  const [message, setMessage] = React.useState(t(language, "flow.install.wait"));
   const [error, setError] = React.useState<string | null>(null);
 
   async function start() {
@@ -344,7 +397,7 @@ function InstallScreen({
     setError(null);
     setStage("install");
     setPercent(8);
-    setMessage("Preparing the Brain.");
+    setMessage(t(language, "flow.install.prepare"));
     const result = await latticeApi.streamModelPrepare(
       { model: model.loadId, engine: model.engine || "local_mlx", allow_download: true },
       {
@@ -352,12 +405,12 @@ function InstallScreen({
           const nextStage = friendlyInstallStage(String(event.stage || ""));
           setStage(nextStage);
           setPercent(Number(event.percent || percentForStage(nextStage)));
-          setMessage(friendlyInstallMessage(event, nextStage));
+          setMessage(friendlyInstallMessage(event, nextStage, language));
         },
         onDone: () => {
           setStage("done");
           setPercent(100);
-          setMessage("Your Brain is ready.");
+          setMessage(t(language, "flow.install.done"));
         },
         onError: (event) => {
           setStage("error");
@@ -369,7 +422,7 @@ function InstallScreen({
     if (result.ok) {
       setStage("done");
       setPercent(100);
-      setMessage("Your Brain is ready.");
+      setMessage(t(language, "flow.install.done"));
       window.setTimeout(onComplete, 700);
     } else {
       setStage("error");
@@ -385,10 +438,10 @@ function InstallScreen({
 
   return (
     <div>
-      <div className="ritual-title">Bring this mind home.</div>
+      <div className="ritual-title">{t(language, "flow.install.title")}</div>
       <div className="ritual-subtitle">
         <strong>{model.shortName}</strong> — {model.reason}.<br />
-        This gives your Brain a local voice. Download, validation, and loading happen only with your consent.
+        {t(language, "flow.install.body")}
       </div>
 
       {/* Living Brain reacts to the ceremony of installation */}
@@ -405,7 +458,7 @@ function InstallScreen({
           {(["install", "download", "validate", "load"] as const).map((item) => (
             <div key={item} className={`ritual-stage ${installStepState(stage, item)}`}>
               <CheckCircle2 style={{ width: 15, height: 15 }} />
-              <span>{installLabel(item)}</span>
+              <span>{installLabel(item, language)}</span>
             </div>
           ))}
         </div>
@@ -416,31 +469,34 @@ function InstallScreen({
       </div>
 
       <div className="ritual-status">{message}</div>
+      <div className="ritual-card" style={{ margin: "0.8rem auto 0", maxWidth: 540, fontSize: "0.86rem", color: "hsl(var(--fg-muted))" }}>
+        {t(language, "flow.install.note")}
+      </div>
 
       {error && (
         <div className="ritual-card" style={{ borderColor: "hsl(var(--destructive)/0.45)", background: "hsl(var(--destructive)/0.07)", marginBottom: "1rem" }}>
           {error}
-          <div style={{ marginTop: "0.5rem", fontSize: "0.85rem" }}>You can go back and choose a different mind, or try again.</div>
+          <div style={{ marginTop: "0.5rem", fontSize: "0.85rem" }}>{t(language, "flow.install.retry")}</div>
         </div>
       )}
 
       <div style={{ display: "flex", gap: "0.75rem", justifyContent: "center", marginTop: "1rem" }}>
-        <Button variant="ghost" onClick={onBack} disabled={busy}>Choose differently</Button>
+        <Button variant="ghost" onClick={onBack} disabled={busy}>{t(language, "flow.install.back")}</Button>
 
         {stage !== "done" ? (
           <Button 
             onClick={start} 
             disabled={busy || !model.supported}
           >
-            {busy ? "Waking the mind..." : "Yes — make this my Brain"}
+            {busy ? t(language, "flow.install.busy") : t(language, "flow.install.start")}
           </Button>
         ) : (
-          <Button onClick={onComplete}>Enter your Brain</Button>
+          <Button onClick={onComplete}>{t(language, "flow.install.enter")}</Button>
         )}
       </div>
 
       <div style={{ fontSize: "0.72rem", color: "hsl(var(--fg-muted))", marginTop: "0.9rem" }}>
-        Explicit consent only. All work happens locally on your machine.
+        {t(language, "flow.install.local")}
       </div>
     </div>
   );
@@ -572,18 +628,21 @@ function fallbackModel(): RecommendedModel {
   };
 }
 
-function rankLabel(role: RecommendedModel["role"], index: number) {
-  if (role === "best") return "Best Experience";
-  if (role === "faster") return "Faster";
-  if (role === "advanced") return "Advanced";
+function rankLabel(role: RecommendedModel["role"], index: number, language: Language) {
+  if (role === "best") return language === "ko" ? "추천" : "Best Experience";
+  if (role === "faster") return language === "ko" ? "빠른 선택" : "Faster";
+  if (role === "advanced") return language === "ko" ? "고급 선택" : "Advanced";
   return `Choice ${index + 1}`;
 }
 
-function recommendedSummary(analysis: FlowAnalysis) {
+function recommendedSummary(analysis: FlowAnalysis, language: Language) {
   const recs = asRecord(analysis.recommendations?.recommendations);
   const topPick = asRecord(recs.top_pick);
-  if (topPick.name || topPick.id) return `${friendlyModelName(String(topPick.name || topPick.id))} looks like the best fit.`;
-  return "A private local Brain is recommended for this computer.";
+  if (topPick.name || topPick.id) {
+    const model = friendlyModelName(String(topPick.name || topPick.id));
+    return language === "ko" ? `${model}이 이 컴퓨터에 가장 잘 맞습니다.` : `${model} looks like the best fit.`;
+  }
+  return language === "ko" ? "이 컴퓨터에는 개인 로컬 Brain을 추천합니다." : "A private local Brain is recommended for this computer.";
 }
 
 function friendlyModelName(value: string) {
@@ -625,20 +684,26 @@ function percentForStage(stage: InstallStage) {
   return 8;
 }
 
-function friendlyInstallMessage(event: ApiData, stage: InstallStage) {
+function friendlyInstallMessage(event: ApiData, stage: InstallStage, language: Language) {
   const fallback = {
-    install: "Preparing the Brain.",
-    download: "Getting the model files.",
-    validate: "Checking that the Brain can answer.",
-    load: "Loading the Brain.",
-    done: "Your Brain is ready.",
-    idle: "Ready when you are.",
-    error: "Something needs attention.",
+    install: t(language, "flow.install.prepare"),
+    download: language === "ko" ? "모델 파일을 받는 중입니다." : "Getting the model files.",
+    validate: language === "ko" ? "Brain이 응답할 수 있는지 확인 중입니다." : "Checking that the Brain can answer.",
+    load: language === "ko" ? "Brain을 불러오는 중입니다." : "Loading the Brain.",
+    done: t(language, "flow.install.done"),
+    idle: t(language, "flow.install.wait"),
+    error: language === "ko" ? "확인이 필요한 일이 있습니다." : "Something needs attention.",
   }[stage];
   return cleanConsumerText(String(event.user_message || event.message || fallback));
 }
 
-function installLabel(stage: "install" | "download" | "validate" | "load") {
+function installLabel(stage: "install" | "download" | "validate" | "load", language: Language) {
+  if (language === "ko") {
+    if (stage === "install") return "준비";
+    if (stage === "download") return "다운로드";
+    if (stage === "validate") return "확인";
+    return "로드";
+  }
   if (stage === "install") return "Install";
   if (stage === "download") return "Download";
   if (stage === "validate") return "Validate";