agent: firstrun — restyle with brand voice, progressive disclosure

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/lib/pages/FirstRunPage.svelte

@@ -3,6 +3,7 @@
   import { listen } from "@tauri-apps/api/event";
   import { page, settings } from "$lib/stores/page.svelte.js";
   import UnicodeSpinner from "$lib/components/UnicodeSpinner.svelte";
+  import { Download, CheckCircle } from 'lucide-svelte';
 
   let systemInfo = $state(null);
   let models = $state([]);
@@ -12,6 +13,16 @@
   let downloadingModel = $state("");
   let error = $state("");
   let ready = $state(false);
+  let downloadStartedAt = $state(0);
+
+  /** Estimated minutes remaining based on progress so far */
+  let estimatedMinutes = $derived.by(() => {
+    if (!downloading || downloadProgress <= 0 || !downloadStartedAt) return 0;
+    const elapsed = (Date.now() - downloadStartedAt) / 1000;
+    const total = elapsed / (downloadProgress / 100);
+    const remaining = total - elapsed;
+    return remaining / 60;
+  });
 
   async function probe() {
     try {
@@ -28,6 +39,7 @@
     downloading = true;
     downloadingModel = modelId;
     downloadProgress = 0;
+    downloadStartedAt = Date.now();
 
     const unlisten = await listen("model-download-progress", (event) => {
       downloadProgress = event.payload.percent;
@@ -80,37 +92,41 @@
   {#if probing}
     <div class="text-center">
       <UnicodeSpinner type="dots" speed={80} classes="text-2xl text-accent" />
-      <h2 class="text-xl font-medium text-text mt-4">Setting up Kon</h2>
+      <h2 class="text-xl font-medium text-text mt-4">Checking your hardware</h2>
-      <p class="text-sm text-text-secondary mt-2">Detecting your hardware...</p>
+      <p class="text-sm text-text-secondary mt-2">One moment.</p>
     </div>
 
   {:else if ready}
     <div class="text-center">
-      <span class="text-4xl">&#3559;</span>
+      <CheckCircle size={40} strokeWidth={1.5} class="text-success mx-auto" />
       <h2 class="text-xl font-medium text-text mt-4">Ready to go</h2>
-      <p class="text-sm text-text-secondary mt-2">Starting Kon...</p>
+      <p class="text-sm text-text-secondary mt-2">Press the button. Start talking. That's it.</p>
     </div>
 
   {:else if downloading}
     <div class="text-center w-full">
+      <Download size={32} strokeWidth={1.5} class="text-accent mx-auto mb-3" />
       <h2 class="text-xl font-medium text-text">Downloading model</h2>
       <p class="text-sm text-text-secondary mt-2">{downloadingModel}</p>
       <div class="w-full bg-bg-input rounded-full h-2 mt-6">
         <div
-          class="bg-accent h-2 rounded-full transition-all duration-300"
+          class="bg-accent h-2 rounded-full"
-          style="width: {downloadProgress}%"
+          style="width: {downloadProgress}%; transition-duration: var(--duration-ui)"
         ></div>
       </div>
       <p class="text-xs text-text-tertiary mt-2">{downloadProgress}%</p>
+      {#if estimatedMinutes > 2}
+        <p class="text-xs text-text-secondary mt-3">Download in background — this may take a while</p>
+      {/if}
     </div>
 
   {:else}
     <div class="w-full">
       <h2 class="text-2xl font-medium text-text text-center">Welcome to Kon</h2>
-      <p class="text-sm text-text-secondary text-center mt-2">Think out loud</p>
+      <p class="text-sm text-text-secondary text-center mt-2">Press the button. Start talking. That's it.</p>
 
       {#if error}
-        <div class="mt-4 p-3 rounded-lg bg-red-500/10 text-red-400 text-sm">{error}</div>
+        <div class="mt-4 p-3 rounded-lg bg-danger/10 text-danger text-sm">{error}</div>
       {/if}
 
       {#if systemInfo}
@@ -131,12 +147,14 @@
 
       {#if models.length > 0}
         <div class="mt-6">
-          <h3 class="text-xs font-medium text-text-tertiary uppercase tracking-wider mb-3">Recommended models</h3>
+          <h3 class="text-xs font-medium text-text-tertiary uppercase tracking-wider mb-3">Pick a model</h3>
+          <p class="text-xs text-text-tertiary mb-3">One tap — we handle the rest.</p>
           <div class="space-y-2">
             {#each models as model, i}
               <button
-                class="w-full text-left p-3 rounded-lg border transition-colors
+                class="w-full text-left p-3 rounded-lg border
                   {i === 0 ? 'border-accent bg-accent/5 hover:bg-accent/10' : 'border-border bg-bg-input hover:bg-hover'}"
+                style="transition-duration: var(--duration-ui)"
                 onclick={() => downloadAndGo(model.id)}
                 disabled={model.is_downloaded}
               >
@@ -147,7 +165,7 @@
                       <span class="ml-2 text-[10px] px-1.5 py-0.5 rounded-full bg-accent/15 text-accent font-medium">Recommended</span>
                     {/if}
                     {#if model.is_downloaded}
-                      <span class="ml-2 text-[10px] px-1.5 py-0.5 rounded-full bg-green-500/15 text-green-400 font-medium">Downloaded</span>
+                      <span class="ml-2 text-[10px] px-1.5 py-0.5 rounded-full bg-success/15 text-success font-medium">Downloaded</span>
                     {/if}
                   </div>
                   <span class="text-xs text-text-tertiary">{model.disk_size_mb} MB</span>
@@ -161,6 +179,7 @@
 
       <button
         class="mt-6 text-xs text-text-tertiary hover:text-text-secondary underline"
+        style="transition-duration: var(--duration-ui)"
         onclick={skipSetup}
       >
         Skip setup — I'll configure later