ltcai 6.7.0 → 7.1.0

package/frontend/src/components/onboarding/InstallScreen.tsx

@@ -81,6 +81,20 @@ export function InstallScreen({
         {t(language, "flow.install.body")}
       </div>
 
+      <section className="ritual-card ritual-expected-card" aria-label={t(language, "flow.install.expectedTitle")}>
+        <div className="ritual-fact-label">{t(language, "flow.install.expectedTitle")}</div>
+        <div className="ritual-time-estimate ritual-expected-line">{expectedLine(model, language)}</div>
+        <ol className="ritual-timeline">
+          {timelineSteps(model, language).map((step) => (
+            <li key={step.key} className="ritual-timeline-step">
+              <span className="ritual-timeline-name">{step.name}</span>
+              <span className="ritual-timeline-time">{step.time}</span>
+            </li>
+          ))}
+        </ol>
+        <div className="ritual-muted-hint">{t(language, "flow.install.expectedCompletion")}</div>
+      </section>
+
       <div className="ritual-install-brain">
         <LivingBrain
           state={brainStateForStage}
@@ -141,6 +155,47 @@ export function InstallScreen({
   );
 }
 
+function expectedLine(model: RecommendedModel, language: Language) {
+  const response = model.estimatedFirstResponseSeconds;
+  if (!model.downloadRequired || model.estimatedDownloadMinutes === 0) {
+    return t(language, "flow.install.expected.ready", { response });
+  }
+  if (model.estimatedDownloadMinutes === null) {
+    return t(language, "flow.install.expected.unknown", { response });
+  }
+  return t(language, "flow.install.expected", {
+    download: t(language, "flow.recommend.minutes", { count: model.estimatedDownloadMinutes }),
+    response,
+  });
+}
+
+function timelineSteps(model: RecommendedModel, language: Language) {
+  const downloadTime = model.downloadRequired && model.estimatedDownloadMinutes
+    ? t(language, "flow.install.timelineApprox", {
+        time: t(language, "flow.recommend.minutes", { count: model.estimatedDownloadMinutes }),
+      })
+    : t(language, "flow.install.timelineQuick");
+  return [
+    {
+      key: "download",
+      name: t(language, "flow.install.timelineStep.download"),
+      time: downloadTime,
+    },
+    {
+      key: "validate",
+      name: t(language, "flow.install.timelineStep.validate"),
+      time: t(language, "flow.install.timelineQuick"),
+    },
+    {
+      key: "load",
+      name: t(language, "flow.install.timelineStep.load"),
+      time: t(language, "flow.install.timelineApprox", {
+        time: `${model.estimatedFirstResponseSeconds}s`,
+      }),
+    },
+  ];
+}
+
 function friendlyInstallStage(stage: string): InstallStage {
   if (/download|pull|weights/i.test(stage)) return "download";
   if (/smoke|validate|verify|test/i.test(stage)) return "validate";

package/frontend/src/components/onboarding/RecommendationScreen.tsx

@@ -23,9 +23,13 @@ export function RecommendationScreen({
 
       <div className="ritual-model-list">
         {items[0]?.supported ? (
-          <Button onClick={() => onSelect(items[0])} className="ritual-primary-model-button">
-            {t(language, "flow.recommend.primary")}
-          </Button>
+          <div className="ritual-primary-cta">
+            <Button onClick={() => onSelect(items[0])} className="ritual-primary-model-button">
+              {t(language, "flow.recommend.primary")}
+            </Button>
+            <div className="ritual-time-estimate ritual-primary-note">{primaryNote(items[0], language)}</div>
+            <div className="ritual-muted-hint ritual-next-hint">{t(language, "flow.recommend.nextHint")}</div>
+          </div>
         ) : null}
         {items.slice(0, 3).map((model, index) => (
           <button
@@ -36,10 +40,23 @@ export function RecommendationScreen({
           >
             <div className="role">{rankLabel(model.role, index, language)}</div>
             <div className="name">{model.shortName}</div>
-            <div className="reason">{model.reason} · {model.size || t(language, "flow.recommend.sizeReady")}</div>
-            {!model.supported && <div className="ritual-model-warning">{t(language, "flow.recommend.unsupported")}</div>}
+            <div className="reason">
+              {model.reason} · {model.size || t(language, "flow.recommend.sizeReady")}
+              {comparisonLabel(model.role, language) ? (
+                <span className="ritual-model-comparison"> {comparisonLabel(model.role, language)}</span>
+              ) : null}
+            </div>
+            <div className="ritual-model-stats">
+              <span className="ritual-time-estimate">{timeEstimate(model, language)}</span>
+            </div>
+            {model.supported ? (
+              <span className="ritual-model-choose">{t(language, "flow.recommend.choose")}</span>
+            ) : (
+              <div className="ritual-model-warning">{t(language, "flow.recommend.unsupported")}</div>
+            )}
           </button>
         ))}
+        <div className="ritual-time-note">{t(language, "flow.recommend.timeNote")}</div>
       </div>
 
       <div className="ritual-action-row">
@@ -51,6 +68,39 @@ export function RecommendationScreen({
   );
 }
 
+function formatMinutes(minutes: number, language: Language) {
+  return t(language, "flow.recommend.minutes", { count: minutes });
+}
+
+function timeEstimate(model: RecommendedModel, language: Language) {
+  const response = model.estimatedFirstResponseSeconds;
+  if (!model.downloadRequired || model.estimatedDownloadMinutes === 0) {
+    return t(language, "flow.recommend.timeEstimate.ready", { response });
+  }
+  if (model.estimatedDownloadMinutes === null) {
+    return t(language, "flow.recommend.timeEstimate.unknown", { response });
+  }
+  return t(language, "flow.recommend.timeEstimate", {
+    download: formatMinutes(model.estimatedDownloadMinutes, language),
+    response,
+  });
+}
+
+function primaryNote(model: RecommendedModel, language: Language) {
+  if (!model.downloadRequired || model.estimatedDownloadMinutes === 0 || model.estimatedDownloadMinutes === null) {
+    return t(language, "flow.recommend.primaryNote.unknown");
+  }
+  return t(language, "flow.recommend.primaryNote", {
+    time: formatMinutes(model.estimatedDownloadMinutes, language),
+  });
+}
+
+function comparisonLabel(role: RecommendedModel["role"], language: Language) {
+  if (role === "faster") return t(language, "flow.recommend.comparison.faster");
+  if (role === "advanced") return t(language, "flow.recommend.comparison.advanced");
+  return "";
+}
+
 function rankLabel(role: RecommendedModel["role"], index: number, language: Language) {
   if (role === "best") return t(language, "flow.recommend.rank.best");
   if (role === "faster") return t(language, "flow.recommend.rank.faster");

package/frontend/src/components/onboarding/recommendationModel.ts

@@ -25,6 +25,12 @@ export type RecommendedModel = {
   downloadSize: string;
   storageLocation: string;
   externalHost: string;
+  /** Estimated download time in minutes. 0 when nothing needs downloading; null when size is unknown. */
+  estimatedDownloadMinutes: number | null;
+  /** Estimated seconds to first response after the model is loaded. */
+  estimatedFirstResponseSeconds: number;
+  /** Rough parameter scale (e.g. 8, 12, 70) parsed from the model name; null when unknown. */
+  parameterBillions: number | null;
 };
 
 export function buildRecommendations(analysis: FlowAnalysis | null): RecommendedModel[] {
@@ -75,6 +81,9 @@ export function fallbackModel(): RecommendedModel {
     downloadSize: "",
     storageLocation: "~/.latticeai/models",
     externalHost: "",
+    estimatedDownloadMinutes: 0,
+    estimatedFirstResponseSeconds: 5,
+    parameterBillions: 8,
   };
 }
 
@@ -87,6 +96,9 @@ function toRecommendedModel(row: ApiData): RecommendedModel {
     && row.load_status !== "runtime_update_needed"
     && row.status !== "not_recommended"
     && compatibility.supported !== false;
+  const downloadRequired = Boolean(row.download_required);
+  const downloadSize = String(row.download_size || row.size || "");
+  const parameterBillions = parseParameterBillions(`${name} ${id}`);
   return {
     id,
     loadId,
@@ -98,13 +110,58 @@ function toRecommendedModel(row: ApiData): RecommendedModel {
     role: "best",
     reason: String(row.reason || ""),
     supported,
-    downloadRequired: Boolean(row.download_required),
-    downloadSize: String(row.download_size || row.size || ""),
+    downloadRequired,
+    downloadSize,
     storageLocation: String(row.storage_location || row.local_path || "~/.latticeai/models"),
     externalHost: externalHostLabel(row),
+    estimatedDownloadMinutes: downloadRequired ? estimateDownloadMinutes(downloadSize) : 0,
+    estimatedFirstResponseSeconds: estimateFirstResponseSeconds(parameterBillions),
+    parameterBillions,
   };
 }
 
+/** Parse a download size string like "8GB", "8.5 GB", "512MB" into megabytes; null when unparseable. */
+export function parseDownloadMegabytes(value: string): number | null {
+  const match = String(value || "").match(/([\d.]+)\s*(t|g|m)?b?/i);
+  if (!match) return null;
+  const amount = Number(match[1]);
+  if (!Number.isFinite(amount) || amount <= 0) return null;
+  const unit = (match[2] || "g").toLowerCase();
+  if (unit === "t") return amount * 1024 * 1024;
+  if (unit === "m") return amount;
+  return amount * 1024; // gigabytes (default assumption for model weights)
+}
+
+/**
+ * Estimate download minutes from a size string, assuming a conservative ~15 Mbps
+ * (≈1.875 MB/s) average home connection. Returns null when the size is unknown so
+ * the UI can fall back to a "time unknown" message instead of showing 0.
+ */
+export function estimateDownloadMinutes(downloadSize: string): number | null {
+  const megabytes = parseDownloadMegabytes(downloadSize);
+  if (megabytes === null) return null;
+  const megabytesPerSecond = 15 / 8; // 15 Mbps
+  const minutes = megabytes / megabytesPerSecond / 60;
+  return Math.max(1, Math.round(minutes));
+}
+
+/** Pull a rough parameter scale (billions) out of a model name like "Gemma 12B" or "qwen-8b". */
+export function parseParameterBillions(text: string): number | null {
+  const match = String(text || "").match(/(\d{1,3}(?:\.\d)?)\s*b\b/i);
+  if (!match) return null;
+  const value = Number(match[1]);
+  return Number.isFinite(value) && value > 0 ? value : null;
+}
+
+/** Estimate seconds to first response from model scale: 8B→5s, 12B→10s, 70B→30s. */
+export function estimateFirstResponseSeconds(parameterBillions: number | null): number {
+  if (parameterBillions === null) return 8;
+  if (parameterBillions <= 9) return 5;
+  if (parameterBillions <= 16) return 10;
+  if (parameterBillions <= 40) return 18;
+  return 30;
+}
+
 function externalHostLabel(row: ApiData) {
   const raw = String(row.source_url || row.download_url || row.repository || row.provider || row.id || "");
   if (!raw) return "";